css中background-origin屬性的使用
阿新 • • 發佈：2018-03-30
pre type 背景圖 head -s adding 邊框 ott back
background-origin用來規定元素背景圖像的相對定位位置，它有三個屬性值：
1、border-box
border-box表示元素背景圖像相對於border區域開始定位。
代碼如下：
<!doctype html>
<html>
<head>
<style>
*{margin:0;padding:0;}
.box{width:430px;height:280px;margin:100px auto;background:url("fengjing.jpg") no-repeat;padding:5px;border:5px dotted #000;
font-size:100px;font-weight:bold;background-origin:border-box;]
</style>
</head>
<body>
<div class="box "></div>
</body>
</html>效果如下：
從上圖可以看出,元素的背景圖像從邊框區域開始定位。
2、padding-box
padding-box表示元素背景圖像相對於padding區域開始定位。
代碼如下：
<!doctype html>
<html>
<head>
<style>
*{margin:0;padding:0;}
.box{width:430px;height:280px;margin:100px auto;background:url("fengjing.jpg") no-repeat;padding:5px;border:5px dotted #000;
font-size:100px;font-weight:bold;background-origin:padding-box;]
</style>
</head>
<body>
<div class="box "></div>
</body>
</html>效果如下：
從上圖可以看出：元素背景圖像從padding區域開始定位。
3、content-box
content-box表示元素背景圖像相對於content區域開始定位。
代碼如下：
<!doctype html>
<html>
<head>
<style>
*{margin:0;padding:0;}
.box{width:430px;height:280px;margin:100px auto;background:url("fengjing.jpg") no-repeat;padding:5px;border:5px dotted #000;
font-size:100px;font-weight:bold;background-origin:content-box;]
</style>
</head>
<body>
<div class="box "></div>
</body>
</html>效果如下：
從上圖可以看出：元素的背景圖像初始位置從content區域開始定位。
總結，background-origin屬性定義了背景圖像的相對定位位置，這個位置可以用background-position來改變，而且元素背景圖像的區域不會因此被限定住，只對元素背景圖像起作用。如果元素使用background-attachment屬性時，該屬性會失效。
css中background-origin屬性的使用