CSS3 背景的繪制區(qū)域
background-origin屬性規(guī)定background-position屬性相對(duì)于什么位置來(lái)定位。如果背景圖像的background-attachment屬性為fixed,則該屬性沒(méi)有效果，語(yǔ)法如下：
background-origin: padding-box|border-box|content-box;
background-origin屬性的值可以是以下幾種：
?padding-box：背景圖像相對(duì)于內(nèi)邊距框來(lái)定位。
?border-box：背景圍像相對(duì)于邊框盒來(lái)定位。
?content-box：背景圖像相對(duì)于內(nèi)容框來(lái)定位。
下面我們通過(guò)一個(gè)實(shí)例來(lái)了解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)論>>