6.1 CSS 背景(background)

用来定义矩形的 填充(fill)方式

尽管CSS允许给任何元素添加背景,但通常用在块级元素上。

背景属性应用在目标元素上,不过考虑到大部分HTML元素是具有透明背景的,那么在 body 上应用一个背景色,看起来将是给所有透明背景元素添加了一个默认背景。

背景色(background-color)

缺省值:transparent
可被子元素继承:不能。

我们在CSS颜色单位课程中已经学习过如何定义颜色,背景色也一样:

body{ background-color: black;}

这样背景被设置为黑色,记住文本内容需要设置合适的颜色来匹配背景色,这样才具备较高的可读性。

背景图片(background-image)

背景图片就像墙壁上的墙纸起到装饰作用,比文本具有更强的视觉冲击力。CSS允许通过图片URL来为元素添加背景图片。

body{ background-image: url(images/diagonal-pattern.png);}

图片的表现行为(如何重复渲染、如何定位、大小等)由其他背景属性定义,background-image 只用来定义使用哪张图片。

需要记住的是,HTML元素并不受背景图片大小的影响,即使背景图片大于HTML元素,元素也不会调整大小来适应背景图片。因为背景图片是一种辅助的修饰性属性,而不是内容。

HTML图片 <img> 和 CSS 背景图片的区别

本质区别就是HTML <img> 元素是内容的一部分,而CSS背景图片只是单纯的修饰符

公司Logo、用户照片、产品图片及缩略图等,这些属于文档内容,应该使用HTML <img> 元素。

条纹图案、风景图、购物车图标等,通常依附于其他HTML元素,即便不可用也不会影响网页的可用性,这些属于修饰性元素,应该使用CSS背景图片。

当然很多情况下,应用场景边界不那么清楚,内容还是修饰这是一个模棱两可的选择。 如果的确是文档中不可或缺的部分,那么使用 <img> 元素,反之则使用CSS背景图片,在实现某些效果时会较为方便。

渐变(Gradients)

CSS还允许使用颜色渐变作为背景图片,在两种不同的形状方向上应用渐变效果:

  • 线性渐变(linear-gradient) 矩形形状的单向渐变
  • 径向渐变(radial-gradient) 圆形形状的全方位渐变

我们将在后续的CSS 渐变(gradients)课程中进行详细讲解。目前我们只需要知道背景渐变也可以作为背景图片(background images)即可:

body{ background-image: linear-gradient(white, grey);}

背景位置(background-position)

background-position 属性设置背景图像的起始(原点)位置。你可以使用如下3种坐标值:

  • xpos ypos:像素值 px,左上角是 0 0。
  • x% y%:百分比,相对于HTML元素大小的比例,第一个值定义水平位置,第二个值定义垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅定义了一个值,另一个值将是 50%。
  • 位置关键词,如 centerleftbottom等,如果您仅规定了一个关键词,那么第二个值将是"center"。

您需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。

body{ background-position: right bottom;}

也可以混合起来使用:

body{ background-position: center 20px;}

背景重复(background-repeat)

缺省情况下,背景会被无限重复渲染。我们可以通过CSS设置为只在水平或者垂直方向重复,以及不重复。

body{ background-repeat: repeat-x;} /* 只在水平方向重复 */
body{ background-repeat: repeat-y;} /* 只在垂直方向重复 */
body{ background-repeat: no-repeat;} /* 只渲染一次,不重复 */

背景大小(background-size)

background-size 用来定义背景图像的尺寸,语法如下:

background-size: length|percentage|cover|contain;

描述
length 设置背景图像的高度和宽度。
第一个值设置宽度,第二个值设置高度。
如果只设置一个值,则第二个值会被设置为 "auto"。
percentage 以HTML元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度,第二个值设置高度。
如果只设置一个值,则第二个值会被设置为 "auto"。
cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
contain 把背景图像按宽度或高度扩展至最大尺寸,使其完全适应内容区域。
body{ background-size: 80px 80px;}

你可以使用下面的例子在线测试各种背景尺寸的应用效果,并留意 cover 和 contain 的差别:

背景属性速写(background)

CSS支持把多个背景属性组合写在一个统一的属性 background 中,这样代码更为简洁。可以设置的属性包括:

  • background-color
  • background-image
  • background-position
  • background-attachment
  • background-repeat
  • background-size
  • background-origin
  • background-clip

其中前面5个为CSS2.1规范所定义,而后面3个为CSS3新增语法。属性定义顺序和格式如下:

background-size: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];

注意在background-position属性和background-size之间有一个斜杠符号。

你可以使用下面的例子来测试背景属性速写(或称缩写):