• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 建站教程 > CSS3+HTML5 >  CSS的background简写正文

CSS的background简写

作者:RunningCoderLee
类型:文章教程
点击次数:
发布时间:2018-08-10 12:37
分享到:
    在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;
}
(责任编辑:网页模板)
  • 本文标签:
  • background简写
CSS3 isolation: isolate详解
css3立体按钮代码