举个例子来说:
如果想让背景图片跟右边边距保持20px的偏移量,同时跟底边保持10px,的偏移量。
图片示例
代码段:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css多重边框</title>
<style>
div{
width: 500px;
height: 500px;
background: url(./img/5.jpg) no-repeat #58a;
background-position: right 20px bottom 10px;
}
</style>
</head>
<body>
<div>
content box
</div>
</body>
</html>
最后一步我们还需要一个适合的回退方案,如果遇到不支持background-position扩展语法的浏览器,背景图片就会贴在左上角,(背景图片的默认位置),
方案:把老套的bottom right定位值写进background的简写属性中:
div{
width: 500px;
height: 500px;
background: url(./img/5.jpg) no-repeat right bottom #58a;
background-position: right 20px bottom 10px;
}
Background-origin方案:
在给背景图片设置距离某个角的偏移量时,有一种情况极为常见:偏移量与容器的内边距一致。
图例:
代码段:
div{
width: 500px;
height: 500px;
padding:10px
background: url(./img/5.jpg) no-repeat #58a;
background-position: right 20px bottom 10px;
}
虽然代码起了作用,但是每次改动内边距,我们都需要在三个地方更新这个值!
解决方法
你可知道每个元素身上都存在三个矩形边框border-box(边框的外沿边距),padding-box(内边距的外沿边距),content-box(内容区的外沿边距),而background-positon:left top 指定那个的左上角?
默认情况下是指padding-box,但是我们可以用bacground-origin个属性指定。再配合background-positon巧妙使用,
例如:我们设定bacground-origin的值为content-box,那么属性中使用的边角关键字将会以内容区的边缘作为准基,也就是说此时背景图片距离边角的偏移量就跟内边距保持一致了
视图:
代码段
div{
width: 500px;
height: 500px;
padding:20px;
background:url(./img/5.jpg) no-repeat #58a top left;
background-origin: content-box;
}
如果想让偏移量与内边距稍有不同就可以配合background-positon使用
视图:
代码段
div{
width: 500px;
height: 500px;
padding:20px;
background:url(./img/5.jpg) no-repeat #58a left top ;
background-origin: content-box;
background-position: 30px 10px ;
}
calc( )方案:
calc( )是以左上角来偏移,例如我们希望它有一个100% - 20px的水平偏移量,以及100% - 20px的垂直偏移量,calc( )函数允许我们执行此类运算,需要配合background-positon使用
实现效果:
代码段:
div{
width: 500px;
height: 500px;
background:url(./img/5.jpg) no-repeat #58a;
background-position: calc(100% - 20px) calc(100% - 20px) ;
}