首頁 > 文章 > web前端 > background-origin屬性怎麼用

background-origin屬性怎麼用

青灯夜游原創: 2019-01-30 14:17:545287瀏覽

background-origin屬性是用來設定背景圖片的定位區域，它有三個值分別表示相對於內邊距框定位、相對於邊框盒定位、相對於內容框定位。

CSS3 background-origin屬性

作用：規定背景圖片的定位區域。

說明：設定或擷取物件的背景影像計算時的參考原點(位置)。

語法：

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

padding-box：背景圖片相對於內邊距框來定位。

border-box：背景圖像相對於邊框盒來定位。

content-box：背景圖片相對於內容方塊來定位。

CSS3 background-origin屬性的使用範例

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
border:1px solid black;
padding:35px;
background-image:url(&#39;https://img.php.cn/upload/article/000/000/024/5c513adf97e86533.jpg&#39;);
background-repeat:no-repeat;
background-position:left;
}
#div1
{
background-origin:border-box;
}
#div2
{
background-origin:content-box;
}
</style>
</head>
<body>

<p>background-origin:border-box:</p>
<div id="div1">
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>

<p>background-origin:content-box:</p>
<div id="div2">
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>

</body>
</html>

效果圖：

background-origin屬性怎麼用

################################################ ####以上就是本篇文章的全部內容，希望能對大家的學習有所幫助。更多精彩內容大家可以追蹤php中文網相關教學欄位！！！ ###

以上是background-origin屬性怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php css3 对象内边距 position padding border background

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：background-size屬性怎麼用下一篇：background-size屬性怎麼用

看更多