首页 > CSS教程 > CSS 背景
此章节介绍:

    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>、<p> 和 <div> 元素将拥有不同的背景色:

    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% opacity

    60% opacity

    30% opacity

    10% opacity

    您从我们的 CSS 颜色 章节中学到了可以将 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% 不透明度的绿色背景 */
    }