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

HTML DOM style background-size 屬性用於設置或獲取背景圖片的大小。

用法

以下是語法 -

設置 backgroundSize 屬性 -

object.style.backgroundSize = "auto|length|cover|contain|intial|inherit"

特性

上述屬性解釋如下 -

Sr.No	屬性和描述
1	auto 背景圖像以全尺寸顯示，它是默認值。
2	length 用於設置背景圖像的寬度和高度。第一個值用於寬度，第二個值用於高度。如果隻給出一個值，則缺失值默認為 auto。
3	percentage 用於以百分比設置背景圖像的寬度和高度。百分比是根據父母的高度和寬度計算的。第一個值設置寬度，第二個值設置高度。如果隻給出一個值，則缺失值默認為 auto。
4	cover 用於將背景圖像縮放到足以覆蓋整個背景區域。
5	contain 縮放圖像，使其高度和寬度適合內容區域。
6	initial 用於將此屬性設置為初始值。
7	inherit 繼承父屬性值

示例

讓我們看一下 HTML DOM 樣式 backgroundSize 屬性的示例 -

<!DOCTYPE html>
<html>
<head>
<style>
   #DIV1{
      box-shadow:0 2px 0 4px mintcream;
      padding:45px;
      background:url("https://www.tutorialspoint.com/plsql/images/plsql-mini-logo.jpg");
      background-size:150px 150px;
   }
</style>
<script>
   function changeBackSize(){
      document.getElementById("DIV1").style.backgroundSize="100px 100px";
      document.getElementById("Sample").innerHTML="The background image size is now reduced";
   }
</script>
</head>
<body>
<h2>PL/SQL Tutorial</h2>
<div id="DIV1"></div>
<p>Change the background image size for the above div by clicking the below button</p>
<button onclick="changeBackSize()">CHANGE SIZE</button>
<p id="Sample"></p>
</body>
</html>

輸出

這將產生以下輸出 -

單擊更改大小按鈕 -

相關用法

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