位置:首頁 > 軟件操作教程 > 編程開發(fā) > CSS > 問題詳情

CSS3 背景的繪制區(qū)域

提問人:劉團圓發(fā)布時間:2020-11-19

background-origin屬性規(guī)定background-position屬性相對于什么位置來定位。如果背景圖像的background-attachment屬性為fixed,則該屬性沒有效果,語法如下:

background-origin: padding-box|border-box|content-box;


background-origin屬性的值可以是以下幾種:

?padding-box:背景圖像相對于內邊距框來定位。

?border-box:背景圍像相對于邊框盒來定位。

?content-box:背景圖像相對于內容框來定位。

下面我們通過一個實例來了解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>

image.png

繼續(xù)查找其他問題的答案?

相關視頻回答
回復(0)
返回頂部