CSS的background简写方式

在CSS2.1里,background属性的简写方式包含五种属性值,从CSS3开始,又增加了3个新的属性值,加起来一共8个。

CSS2.1

  • background-color 使用的背景颜色。
  • background-image 使用的背景图像。
  • background-repeat 如何重复背景图像。
  • background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
  • background-position 背景图像的位置。

CSS3

  • background-size 背景图片的尺寸。
  • background-origin 背景图片的定位区域。
  • background-clip 背景的绘制区域。

简写形式

background: 
[background-color]
 [background-image] 
[background-repeat] 
[background-attachment] 
[background-position] /
[ background-size] 
[background-origin] 
[background-clip];
需要注意的是里面的 /,它和font以及border-radius里简写方式使用的 /用法相似。 /可以在支持这种写法的浏览器里在 background-position后面接着写 background-size
除此之外,你也可以增加另外两个描述它的属性值: background-originbackground-clip

示例方法:
.example {
  background: aquamarine 
              url(img.png) 
              no-repeat 
              scroll 
              center center / 50% 
              content-box content-box;
}

猜你喜欢

转载自www.cnblogs.com/chenduzizhong/p/12346348.html