CSS3背景图片

一，background-origin  背景图片的定位区域

看下面一个例子

<div class="wrap">
    <span>padding</span>
    <div class="content">content</div>
</div>

<style>
.wrap{
    width:200px;
    border:20px dashed #000;
    padding:20px;
    font-weight:bold;
    color:#000;
    background:#ccc url(http://static.mukewang.com/static/img/logo_index.png) right top no-repeat; 
    position:relative;
}
.wrap span{
    relative: absolute;
    left:0;
    top:0;
}
.content{
    height:80px;
    border:1px solid #333;
}
</style>

如果图片要在content里面的框内显示，就要用到background-origin  设置图片的原始起始位置

background-origin: border-box  |  padding-box  | content-box

3个参数表示的意思不一样

border-box  背景图片从边框开始显示    padding-box  从内边距(默认值)开始   content-box 从内容区域开始

但要注意一点：如果背景图片不是no-repeat  就无效

上面一个例子，如果要在content里面显示，background下面写上  background-origin:content-box;

二，background-clip 背景图片裁剪

background-clip: border-box  |  padding-box  |  content-box  |  no-clip

参数分别表示从边框，内填充，内容区域向外裁剪  no-clip不裁剪效果和border-box一样

如果上面的例子，不是把背景图片填充到中间区域，而是要在中间区域裁剪  那就写  background-clip:content-box

三，background-size  设置背景图片的尺寸，以长度值或百分比显示，还可以通过cover和contain对图片进行伸缩

background-size:auto | <长度值> | <百分比> | cover | contain

1、auto：默认值，不改变背景图片的原始高度和宽度；
2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；
3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；
4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；
5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。