一,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:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。