css编程入门全集(6.入门编程)

css编程入门全集(6.入门编程)(1)

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)"

其他元素

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

实例

在这里,<h1>、<p> 和 <div> 元素将拥有不同的背景色:

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

不透明度 / 透明度

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

css编程入门全集(6.入门编程)(2)

实例

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

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


使用 RGBA 的透明度

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

css编程入门全集(6.入门编程)(3)

RGBA 颜色值指定为:rgba(red, green, blue, alpha)。alpha 参数是介于 0.0(完全透明)和 1.0(完全不透明)之间的数字。

实例

div {background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */}

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页