CSS ব্যাকগ্রাউন্ড

CSS 背景属性用于定义元素的背景效果。

在这些章节中，您将学习如下 CSS 背景属性：

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

CSS background-color

background-color 属性指定元素的背景色。

ইনস্ট্যান্স

页面的背景色设置如下：

body {
  background-color: lightblue;
}

আপনার হাতে পরীক্ষা করুন

通过 CSS，颜色通常由以下方式指定：

  • 有效的颜色名称 - 比如 "red"
  • 十六进制值 - 比如 "#ff0000"
  • RGB 值 - 比如 "rgb(255,0,0)"

请查看 CSS রঙ মান，获取可能颜色值的完整列表。

其他元素

您可以为任何 HTML 元素设置背景颜色：

ইনস্ট্যান্স

在这里，

、

和

元素将拥有不同的背景色：

h1 {
  background-color: green;
}
div {
  background-color: lightblue;
}
p {
  background-color: yellow;
}

আপনার হাতে পরীক্ষা করুন

不透明度 / 透明度

opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明：

opacity 1
opacity 0.6
opacity 0.3
opacity 0.1

ইনস্ট্যান্স

div {
  background-color: green;
  opacity: 0.3;
}

আপনার হাতে পরীক্ষা করুন

注意：使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。

使用 RGBA 的透明度

如果您不希望对子元素应用不透明度，例如上面的例子，请使用 RGBA 颜色值。下面的例子设置背景色而不是文本的不透明度：

100% অপ্যাক্সি
60% অপ্যাক্সি
30% opacity
10% opacity

আপনি আমাদের CSS রঙ চাপে আপনি RGB রঙ হিসাবে ব্যবহার করা শিখেছেন।RGB ছাড়াও, RGB রঙ মানকে RGB রঙের সঙ্গে alpha চ্যানেল একসঙ্গে ব্যবহার করা হয় (RGBA) - এই চ্যানেল রঙের অস্পষ্টতা নির্দিষ্ট করে

RGBA রঙ মান রূপায়িত হয়: rgba(red, green, blue, alpha)alpha পারামিটার 0.0 (সম্পূর্ণ স্পষ্ট) এবং 1.0 (সম্পূর্ণ অস্পষ্ট) মধ্যে একটি সংখ্যা

টীকা:আপনি আমাদের CSS রঙ এই চাপে আপনি RGBA রঙের বিষয়ে আরও বেশি জানতে পারবেন。

ইনস্ট্যান্স

div {
  background: rgba(0, 128, 0, 0.3) /* 30% অস্পষ্টতা সহ সবুজ ব্যাকগ্রাউন্ড */
}

আপনার হাতে পরীক্ষা করুন