CSS 背景

CSS 背景属性用于为元素添加背景效果。

CSS 背景属性用于为元素添加背景效果。

本节将带你了解以下 CSS 背景属性:

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

背景色

在 CSS 中,使用 background-color 属性设置元素的背景颜色。

设置页面的背景颜色:

body {
  background-color: gray;
}

使用 CSS,颜色通常由以下方式设置:

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

查看 CSS 颜色章节了解更多关于 CSS 颜色的信息。

不透明度

opacity 属性设置元素的不透明度,取值为 0.0(完全透明)和 1.0(完全不透明)的数。

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

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

使用 RGBA 的颜色透明度

CSS 颜色章节中了解到,可以使用带有 Alpha 通道的 RGB 颜色值(RGB**A**)设置颜色的不透明度。

RGBA 颜色值表示方法为: rgba(red, green, blue, alpha)alpha 参数即是不透明度,取值为 0.0(完全透明)和 1.0(完全不透明)之间的数。

设置背景颜色的不透明度

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

背景图片

在 CSS 中使用 background-image 属性设置元素的背景图像。

默认情况下,图像是重复的,覆盖了整个元素。

设置页面的背景图像:

body {
  background-image: url("paper.gif");
}

设置 <div> 元素的背景图像:

div {
  background-image: url("paper.gif");
}

CSS 背景图片重复

在 CSS 中,背景图片默认在横向纵向重复排列。这导致有些图像看起来很奇怪。为了让效果更好,使用 background-repeat 设置背景图像合适的重复方式。常用的重复方式有:

  • repeat - 横向纵向都重复,此选项为默认选项
  • repeat-x - 只横向重复
  • repeat-y - 只纵向重复
  • no-repeat - 不重复

横向重复的背景图像:

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

背景图片的位置

在 CSS 中,使用 background-position 属性设置背景图像的位置。

将背景图片放在右上角:

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

CSS 背景定位 background-attachment

background-attachment 属性设置背景图像的位置是在视口内固定,或者随着包含它的区块滚动。

主要可选值有:

  • fixed - 相对于视口(viewport)固定
  • scroll - 相对元素本身固定,不随内容一起滚动
  • local - 相对元素的内容固定,随内容一起滚动,

设置应固定在右上角的背景图像:

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

CSS 背景属性简写 background

background 是一个简写属性,用于一次性集中定义各种背景属性,包括 background-color, background-image, background-repeatbackground-position 等所有背景属性。

而不是写:

body {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

您可以使用速记属性 background

使用速记属性在一个声明中设置背景属性:

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

使用速记属性时,属性值的顺序是:

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

缺少一个属性值无关紧要,只要其他属性值按此顺序即可。请注意,我们在上面的示例中没有使用 background-attachment 属性,因为它没有值。

所有 CSS 背景属性

背景属性 说明
background 在一个声明中设置所有的背景属性
background-attachment 设置背景图像是固定的还是随页面的其余部分滚动
background-clip 设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面。
background-color 设置背景颜色
background-image 设置背景图片
background-origin 设置背景图片的原点位置
background-position 设置背景图片的初始位置
background-repeat 设置背景图片是否重复
background-size 设置背景图片的大小