CSS3 backgroud 新增加的属性

一、CSS3背景background新增加的属性

 

background-size     背景图片大小

background-origin  背景起始位置

background-clip      背景范围

1、background-size背景大小

用background-size可以控制背景图片的大小，单位可以是固定像素值，也可以是百分比。如果是百分比，则相对于父元素的尺寸，还有cover和contain两个属性值。

background-size:cover/contain/length/percentage

值	描述
cover	等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。保证背景区域完全被覆盖。
contain	等比例缩放背景图片以完全装入背景区，可能背景区部分空白。保证背景图片在背景区域内全部可见。
length	指定背景图片大小，不能为负值。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"，保持等比例缩放。
percentage	以父元素的百分比来设置背景图像的宽度和高度。

比如，可以写成如下格式，来自MDN官方文档：

/* 关键字 */
background-size: cover;
background-size: contain;

/* 一个值: 这个值指定图片的宽度，图片的高度隐式的为auto */
background-size: 50%;
background-size: 3em;
background-size: 12px;
background-size: auto;

/* 两个值 */
/* 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;

/* 逗号分隔的多个值：设置多重背景，每一个值对应一张背景图片 */
background-size: auto, auto;     /* 不同于background-size: auto auto */
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;

/* 全局属性 */
background-size: inherit;
background-size: initial;
background-size: unset;

现在，我有一张188*38大小的图片，我们来看一下background-size属性的区别：

/*html*/
<div id="box1">contain</div>
<div id="box2">cover</div>
<div id="box3">100px auto</div>
<div id="box4"></div>
/*css*/
#box1,#box2,#box3{
    width:200px;
    height:200px;
    background:url(../img/logo.png) no-repeat;
    float:left;
    margin:0 1em 1em 0;
    padding:0.5em;
    border:1px solid #FF5F07;
}
#box1{
    background-size:contain;
}
#box2{
    background-size:cover;
}
#box3{
    background-position:center;
    background-size:100px auto;
}

效果显示如下：

当属性为contain时，等比例缩放背景图片以完全装入背景区，可能背景区部分空白。保证背景图片在背景区域内全部可见。

当属性为cover时，等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。保证背景区域完全被覆盖。

当属性为100px，auto时；第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"，保持等比例缩放。

2、background-origin背景起始位置

background-origin 属性规定 background-position 属性相对于什么位置来定位。默认值为padding-box。

background-origin ： border-box | padding-box | content-box;

注意：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。如果背景不是no-repeat，这个属性无效，它会从边框开始显示。

一个盒模型的范围由内容区域，内边距区域，边框区域组成。通过background-origin属性可以控制背景图片的起始位置。

<div class="box bg1">border-box</div>
<div class="box bg2">padding-box</div>
<div class="box bg3">content-box</div>

.box{
    box-sizing:border-box;
    width:220px;
    height:220px;
    border:12px solid rgba(0,0,0,.5);
    padding:10px;
    background:url(../img/logo.png) no-repeat;  /*必须是no-repeat，background-origin才有效*/
    margin:10px;
    float:left;
    color:#fff;
}
.bg1{
    background-origin:border-box; /*背景图片从边框开始*/
}
.bg2{
    background-origin:padding-box; /*从内边距开始*/

}
.bg3{
    background-origin:content-box; /*从内容区开始*/
}

  

3、background-clip 属性规定背景的显示区域

background-clip: border-box|padding-box|content-box|text;

默认值为border-box。

当背景大于了要显示的区域的时候，可以通过这个属性进行裁剪，让背景只在某个区域显示。

border-box:背景被裁剪到边框范围内显示。

padding-box:背景被裁剪到内边距范围内显示。

content-box:背景被裁剪到内容区域显示。

text:背景被裁剪显示在文本区域。

配合background-origin很好用

<div class="box bg1">border-box</div>
<div class="box bg2">padding-box</div>
<div class="box bg3">content-box</div>

.box{
    box-sizing:border-box;
    width:220px;
    height:220px;
    border:12px solid rgba(0,0,0,.5);
    padding:20px;
    background:url(http://www.mrszhao.com/zb_users/upload/codepen/fengjing.jpg) no-repeat center;  /*必须是no-repeat，background-origin才有效*/
    margin-right:10px;
    float:left;
    color:#fff;
}
.bg1{
    background-origin:border-box; /*背景图片从边框开始*/
}
.bg2{
    background-origin:padding-box; /*从内边距开始*/
    background-clip:padding-box;  /*背景图片裁剪在padding内边距范围内*/
}
.bg3{
    background-origin:content-box; /*从内容区开始*/
    background-clip:content-box;/*背景图片裁剪在内容区范围内*/
}

 

可以看到第一张图片的显示范围为：boder+padding+content ; 

第二张图片的显示范围为：padding+content ; 

第三张图片的显示范围为：content ; 

background-clip:text 背景显示在文字内部

最后一个text属性值具有兼容性的问题，如图：

background-clip: text;
-webkit-background-clip: text;
color: transparent;  /*文字颜色一定要透明，否则看不到下面的背景*/

大部分浏览器都需要加上-webkit前缀。

可以实现背景只在文字部分显示，文字透明，露出背景图片，可以实现很好的遮罩效果。以及结合线性渐变做光斑移动的效果。

为了避免兼容性问题，比如IE系列不支持，这个时候文字又透明了，那么可以使用文字的私有属性：-webkit-text-fill-color:transparent;

结合到animation可以实现无缝滚动的效果

<div class="box bg1">
    这是一段有背景图片的文字
</div>
<div class="box bg2">
    这是一段渐变色无缝滚动的文字
</div>

.bg1{
    background:url(http://www.mrszhao.com/zb_users/upload/codepen/fengjing.jpg) center;
}
.bg2{
    background:linear-gradient(to right,#0250c5 0%,#d43f8d 25%,#0250c5 50%,#d43f8d 75%,#0250c5 100%);
    background-size:200% auto;
    animation:move 3s linear infinite;
}
.box{
    width:700px;
    height:100px;
    margin:20px auto;
    font:bold 3rem "microsoft Yahei";
    line-height:100px;
    text-align:center;
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}
@keyframes move{
    0%{
        background-position:0 0;
    }
    100%{
        background-position:-100% 0;
    }
}

总结：

backgroud的新属性真的很强大，让我们对图片的掌控更加顺心如意。