backgroundPosition 屬性用於設置或獲取元素背景圖像相對於原點的初始位置。
用法
以下是語法 -
設置 backgroundPosition 屬性 -
object.style.backgroundPosition = value
值
以下是值 -
值 | 描述 |
---|---|
top left top center top right center left center center center right bottom left bottom center bottom right | 定位可以通過他們的名字來理解。如果你隻寫一個值,那麽另一個將始終是中心。 |
xpos ypos | 指示水平(x)和垂直位置(y)。它從左上角以 0,0 開始。盡管您也可以使用任何其他 CSS 單位,但首選像素作為單位。 |
x% y% | 以百分比指定水平(x)和垂直(y)位置的定位。它從左上角 0% 0% 和右下角 100% 100% 開始。因為指定一個值意味著另一個將是中心,即它是 50%。 |
initial | 用於將此屬性設置為初始值。 |
inherit | 繼承父屬性值。 |
示例
讓我們看一個 backgroundPosition 屬性的例子 -
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-image:url("https://www.tutorialspoint.com/power_bi/images/power-bi-minilogo.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:20% 60%;
}
</style>
<script>
function changeBackPosition(){
document.body.style.backgroundPosition="top right";
document.getElementById("Sample").innerHTML="The background image position is now changed";
}
</script>
</head>
<body>
<h2>Learning is fun</h2>
<p>Free learning tutorial for all...</p>
<p>Change the background image position by clicking the below button.</p>
<button onclick="changeBackPosition()">CHANGE POSITION</button>
<p id="Sample"></p>
</body>
</html>
輸出
這將產生以下輸出 -
單擊更改位置按鈕 -
相關用法
- HTML DOM Style backgroundClip屬性用法及代碼示例
- HTML DOM Style backgroundColor屬性用法及代碼示例
- HTML DOM Style background屬性用法及代碼示例
- HTML DOM Style backgroundSize屬性用法及代碼示例
- HTML DOM Style backgroundRepeat屬性用法及代碼示例
- HTML DOM Style backgroundImage屬性用法及代碼示例
- HTML DOM Style backgroundOrigin屬性用法及代碼示例
- HTML DOM Style backgroundAttachment屬性用法及代碼示例
- HTML DOM Style backfaceVisibility屬性用法及代碼示例
- HTML DOM Style borderBottomWidth屬性用法及代碼示例
- HTML DOM Style borderCollapse屬性用法及代碼示例
- HTML DOM Style borderImageOutset屬性用法及代碼示例
- HTML DOM Style borderImage屬性用法及代碼示例
- HTML DOM Style borderColor屬性用法及代碼示例
- HTML DOM Style borderBottomColor屬性用法及代碼示例
- HTML DOM Style borderBottomStyle屬性用法及代碼示例
- HTML DOM Style borderImageRepeat屬性用法及代碼示例
- HTML DOM Style border屬性用法及代碼示例
- HTML DOM Style borderBottom屬性用法及代碼示例
- HTML DOM Style borderBottomLeftRadius屬性用法及代碼示例
注:本文由純淨天空篩選整理自AmitDiwan大神的英文原創作品 HTML DOM Style backgroundPosition Property。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。