灵活的背景定位
问题
针对某一个特定容器的某一个角对背景做偏移定位
background-position方案
CSS3中对background-position
属性进行了扩展,允许我们指定背景图片距任意角的偏移量,只要在偏移量前面指定关键字即可。
.div_bg{
height: 200px;
width: 200px;
margin: 180px auto;
background: url(./pig.png) no-repeat bottom right #FAC;
background-position: right 20px bottom 10px;
}
效果图
回退方案: 把老套的bottom
right
定位写进background
属性中
background: url(./pig.png) no-repeat bottom right #FAC;
background-origin方案
场景:
在给背景设置距离某一个角的偏移量时,偏移量与内边距一致是极其常见的,使用background-position属性,css如下:
.div_bg{
padding: 10px;
background: url(./pig.png) no-repeat bottom right #FAC;
background-position: right 10px bottom 10px;
}
缺点: 每次改动内边距时都要修改三个位置的值,代码不够DRY
(Don’t repeat yourself )
默认情况下,
background-position
是以padding box为准的,这样边框才不会遮住背景,top left默认指的是pading box的左上角
CSS3新增属性background-origin
可以改变这种行为,若将它的值改为content-box
,那么background-position
使用的边角关键字就会以内容区域为基准。
.div_bg{
height: 200px;
width: 200px;
margin: 180px auto;
padding: 10px;
background: url(./pig.png) no-repeat bottom right #FAC;
/* background-position: right 10px bottom 10px; */
background-origin: content-box;
}
必要的时候我们可以把
background-position
和background-origin
组合起来使用。如果偏移量与内边距稍稍有些不同(内敛或者超出)
如下所示,用background-origin: content-box;
同时使用background-position
设置偏移量(正值或负值)
.div_bg{
height: 200px;
width: 200px;
margin: 180px auto;
padding: 10px;
background: url(./pig.png) no-repeat bottom right #FAC;
background-position: right 0px bottom 20px;
background-origin: content-box;
}
效果图
calc()方案
以左上角偏移的思路来考虑,距底边10px,右边20px就是希望它能有一个100% - 20px的水平偏移和100% - 10px的垂直偏移。calc()允许我们进行这类运算并且可以在background-position属性中使用。
.div_bg{
background: url(./pig.png) no-repeat #FAC;
background-position: calc(100% - 20px) calc(100% - 10px);
}
注意:
calc()
函数内部的-
和+
运算符两侧要各加一个空格
,否则会产生解析错误