CSS3 背景的繪制區(qū)域
background-origin屬性規(guī)定background-position屬性相對(duì)于什么位置來定位。如果背景圖像的background-attachment屬性為fixed,則該屬性沒有效果，語法如下：
background-origin: padding-box|border-box|content-box;
background-origin屬性的值可以是以下幾種：
?padding-box：背景圖像相對(duì)于內(nèi)邊距框來定位。
?border-box：背景圍像相對(duì)于邊框盒來定位。
?content-box：背景圖像相對(duì)于內(nèi)容框來定位。
下面我們通過一個(gè)實(shí)例來了解background-origin屬性。
【例題】使用background-origin屬性
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 500px;
height: 200px;
border:1px solid red;
padding:50px;
margin:20px;
background-image: url('花.png');
background-repeat: no-repeat;
}
.d1{
background-origin: content-box;
}
.d2{
background-origin: border-box;
}
</style>
</head>
<body>
<div>這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本</div>
<div>這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本</div>
</body>
</html>
湘公網(wǎng)安備:43011102000856號(hào) 
點(diǎn)擊加載更多評(píng)論>>