HTML DOM Style background屬性用法及代碼示例

background 屬性用於設置或獲取與元素關聯的背景圖像。它是一個速記屬性，最多可以操作 8 個屬性。

用法

以下是語法 -

設置背景屬性 -

object.style.background = "color image repeat attachment position size origin clip|initial|inherit"

值

以下是值 -

Sr.No	值和描述
1	color 用於設置元素背景顏色。
2	image 用於設置元素背景圖像。
3	repeat 用於設置背景圖像的重複方式。
4	attachment 用於將背景圖像設置為固定或隨頁麵滾動。
5	position 用於設置背景圖像的起始位置。
6	size 用於設置背景圖像大小。
7	origin 用於指定背景定位區域。
8	clip 用於設置背景圖像的繪製距離。

示例

讓我們看一個背景屬性的例子 -

<!DOCTYPE html>
<html>
<head>
<style>
   #PIC{
      width:250px;
      height:150px;
      border:solid 3px black;
      font-weight:100;
      text-align:center;
      color:white;
      font-size:40px;
      background:url("https://www.tutorialspoint.com/python/images/python-mini.jpg") no-repeat fixed 2% 8%;
   }
</style>
<script>
   function changeBackground(){
      document.getElementById("PIC").style.backgroundImage="url(https://www.tutorialspoint.com/csharp/images/csharp-mini-logo.jpg)";
      document.getElementById("Sample").innerHTML="The background URL is now changed and new background image can be seen.";
   }
</script>
</head>
<body>
<h2>Learning is fun</h2>
<div id="PIC">Tutorial</div>
<p>Click the below button to change the above background image for the div</p>
<button onclick="changeBackground()">CHANGE BACKGROUND</button>
<p id="Sample"></p>
</body>
</html>

輸出

這將產生以下輸出 -

單擊更改背景圖像 -

相關用法

注：本文由純淨天空篩選整理自AmitDiwan大神的英文原創作品 HTML DOM Style background Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。