CSS中的复合属性

1、background 属性

background 属性负责给盒子设置背景图片和颜色,它是一个复合属性,可以分解成以下几个设置项:

  1. background-color 设置背景颜色
  2. background-image 设置背景图片地址
  3. background-repeat 设置背景图片如何重复平铺(repeat-x、repeat-y、no-repeat、repeat缺省值)
  4. background-postion 设置背景图片的位置
  5. background-attachment 设置背景图片是否固定还是随着页面滚动条滚动,设置值为:fixed,表示网页滚动时,背景图不动

background 属性是上面五个属性的缩写,缩写的形式性能更高,代码更简洁。

比如:background: #00ff00 url(bgimage.gif) no-repeat left center fixed

注意,除了上面的五个属性,其余的三个属性:background-size,background-origin,background-clip 是要单独写出来的。

1.1、缩写顺序

让我们看看CSS的background属性的官方定义:

Value: ['background-color'> ||<'background-image'> || <'background-repeat'>|| <'background-attachment'> ||<'background-position'>] | inherit

上面的内容只是定义的background属性的值包含那些内容,但并没有指定这些值的顺序,所以说 background 属性的值的书写顺序官方并没有强制要求。但是为了可读性和规范,一般来说 background 的缩写顺序是 background-color,background-image,background-repeat,background-attachment,background-position。

原文地址:https://www.cnblogs.com/wenxuehai/p/12400974.html