码迷,mamicode.com
首页 > Web开发 > 详细

CSS的background简写方式

时间:2019-01-11 22:12:26      阅读:1287      评论:0      收藏:0      [点我收藏+]

标签:用法   参考   osi   radius   尺寸   手册   滚动   repeat   区域   

参考资料

作者:RunningCoderLee
链接:https://www.jianshu.com/p/fa07c2606380
來源:简书

其他资料 CSS3参考手册 https://www.css88.com/book/css/properties/background/background.htm

在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-origin和 background-clip

示例用法

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

CSS的background简写方式

标签:用法   参考   osi   radius   尺寸   手册   滚动   repeat   区域   

原文地址:https://www.cnblogs.com/gleamer/p/10257459.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!