CSS background-origin屬性用法及代碼示例

這個 CSS 屬性幫助我們調整網頁的背景圖像。它指定背景位置區域，即背景圖像的原點。當 background-attachment 的值設置為固定時，此 CSS 屬性將不起作用。

background-origin 屬性類似於 background-clip 屬性，但它調整背景大小而不是剪裁背景。默認情況下，元素的原點是屏幕的左上角。

如果元素有多個背景圖像，那麽我們可以為每個 background-image 指定不同的 background-origin 屬性值，用逗號分隔。每個圖像都將與 background-origin 屬性的相應值匹配。

用法

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

該屬性的值如下表所示。

值	描述
padding-box	這是相對於 padding-box 定位背景的默認值。背景從填充邊的左上角開始。
border-box	它相對於 border-box 定位背景。背景從邊框的左上角開始。
content-box	它相對於 content-box 定位背景。背景從內容的左上角開始。
initial	它將屬性設置為其默認值。
inherit	它從其父元素繼承屬性。

讓我們通過一些插圖來理解這個屬性。

示例 1

在這個例子中，有三個帶有背景圖像的 div 元素。在這裏，我們使用 background-origin 屬性的 padding-box、border-box 和 content-box 值。

<!DOCTYPE html>
<html>
<head>
<title> background-origin property </title>
<style>
div{
padding:20px;
width:350px;
height:175px;
background-image: url('jtp.png');
background-repeat:no-repeat;
border:8px dashed blue;
color:red;
font-size:25px;
text-align:center;
}
#border{
background-origin:border-box;
}
#padding{
background-origin:padding-box;
}
#content{
background-origin:content-box;
}
h2{
color:red;
}
</style>
</head>

<body>
<h2> background-origin:border-box; </h2>
<div id = "border">
<p>
Welcome to the javaTpoint.com
</p>
</div>
<h2> background-origin:padding-box; </h2>
<div id = "padding">
<p>
Welcome to the javaTpoint.com
</p>
</div>
<h2> background-origin:content-box; </h2>
<div id = "content">
<p>
Welcome to the javaTpoint.com
</p>
</div>
</body>
</html>

輸出

在下一個例子中，我們將看到當元素有兩個背景圖像時如何指定 background-origin 屬性。

例2

在這個例子中，我們使用兩個 background-images 作為 div 元素。在這裏，我們在四個 div 元素上應用了 background-origin 屬性。

<!DOCTYPE html>
<html>

<head>
<title>background-origin property</title>
<style>
div{
padding:20px;
width:350px;
height:175px;
background-image: url('jtp.png'), url('lion.png');
background-repeat:no-repeat;
border:8px dashed blue;
color:red;
font-size:25px;
text-align:center;
}

#div1{
background-origin:border-box, content-box;
}
#div2{
background-origin:padding-box, border-box;
}
#div3{
background-origin:content-box, content-box;
}
#div4{
background-origin:content-box, padding-box;
}

h2{
color:red;
}
</style>
</head>

<body>
<h2> background-origin:border-box, content-box; </h2>
<div id = "div1">
<p>
Welcome to the javaTpoint.com
</p>
</div>
<h2> background-origin:padding-box, border-box; </h2>
<div id = "div2">
<p>
Welcome to the javaTpoint.com
</p>
</div>
<h2> background-origin:content-box, content-box; </h2>
<div id = "div3">
<p>
Welcome to the javaTpoint.com
</p>
</div>
<h2> background-origin:content-box, padding-box; </h2>
<div id = "div4">
<p>
Welcome to the javaTpoint.com
</p>
</div>
</body>

</html>

輸出

例3

在此示例中，我們使用 background-origin 屬性的初始值和繼承值。

<!DOCTYPE html>
<html>

<head>
<title>background-origin property</title>
<style>
div{
padding:20px;
width:350px;
height:175px;
background-image: url('jtp.png');
background-repeat:no-repeat;
border:8px dashed blue;
color:red;
font-size:25px;
text-align:center;
}

#div1{
background-origin:initial;
}
#div2{
background-origin:inherit;
}
h2{
color:red;
}
</style>
</head>

<body>
<h2> background-origin:initial; </h2>
<div id = "div1">
<p>
Welcome to the javaTpoint.com
</p>
</div>
<h2> background-origin:inherit; </h2>
<div id = "div2">
<p>
Welcome to the javaTpoint.com
</p>
</div>
</body>

</html>

輸出

相關用法

注：本文由純淨天空篩選整理自 CSS background-origin property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。