當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

HTML Style background用法及代碼示例


HTML DOM中的Style背景屬性是一種簡寫屬性，用於設置或返回元素的背景。它可以幫助操縱八個背景屬性中的一個或多個。

用法:

  • 它返回背景屬性。
    object.style.background
  • 用於設置背景屬性。
    object.style.background = "color image repeat attachment 
position size origin clip|initial|inherit"

屬性值：後台有8個屬性，如下所述：


  • color:用於設置元素的背景色。它對應於background-color屬性。
  • image:它用於設置元素的背景圖像。它對應於background-image屬性。
  • repeat:它用於設置應如何沿x和y軸重複背景圖像。它對應於background-repeat屬性。
  • attachment:它用於設置圖像將滾動還是保持固定。它對應於background-attachment屬性。
  • position:它用於設置背景圖像的開始位置。它對應於background-position屬性。
  • size:它用於以固定單位或百分比設置背景圖像的大小。它對應於background-size屬性。
  • origin:background-origin屬性指定背景圖像的原點位置。它對應於background-origin屬性。
  • clip:用於設置背景圖像的繪製區域。它對應於background-clip屬性。
  • initial:用於將屬性設置為其默認值。
  • inherit:它用於從其父項繼承屬性。

例：背景色屬性

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        DOM Style Background Property 
    </title> 
      
    <style> 
        .GFG { 
            height:250px; 
            width:250px; 
            border-style:solid; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <b>DOM Style Background Property</b> 
      
    <p> 
        Click on the button to set 
        the background color 
    </p> 
      
    <div class="GFG"></div> 
      
    <button onclick="setBg()"> 
        Set background color 
    </button> 
      
    <!-- Script to set the background color -->
    <script> 
        function setBg() { 
            elem = document.querySelector('.GFG'); 
            elem.style.background = "green"; 
        } 
    </script> 
</body> 
  
</html>                    

輸出：

  • 單擊按鈕之前：
    color-before
  • 單擊按鈕後：
    color-after

例：background-image屬性

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        DOM Style Background Property 
    </title> 
      
    <style> 
        .GFG { 
            height:250px; 
            width:250px; 
            border-style:solid; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <b>DOM Style Background Property</b> 
      
    <p> 
        Click on the button to set 
        the background image 
    </p> 
      
    <div class="GFG"></div> 
      
    <button onclick="setBg()"> 
        Set background color 
    </button> 
      
    <!-- Script to set the background image -->
    <script> 
        function setBg() { 
            elem = document.querySelector('.GFG'); 
            elem.style.background =  
"url('https://media.geeksforgeeks.org/wp-content/uploads/20190314004249/sample-image2.png')"; 
        } 
    </script> 
</body> 
  
</html>                    

輸出：

  • 單擊按鈕之前：
    image-before
  • 單擊按鈕後：
    image-after

例：本示例使用repeat-x屬性沿x軸重複背景圖像。

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        DOM Style Background Property 
    </title> 
      
    <style> 
        .GFG { 
            height:250px; 
            width:250px; 
            border-style:solid; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <b>DOM Style Background Property</b> 
      
    <p> 
        Click on the button to set 
        the background image 
    </p> 
      
    <div class="GFG"></div> 
      
    <button onclick="setBg()"> 
        Set background color 
    </button> 
      
    <!-- Script to set the background color -->
    <script> 
        function setBg() { 
            elem = document.querySelector('.GFG'); 
            elem.style.background =  
"url('https://media.geeksforgeeks.org/wp-content/uploads/20190314004249/sample-image2.png') repeat-x"; 
        } 
    </script> 
</body> 
  
</html>                    

輸出：

  • 單擊按鈕之前：
    repeat-before
  • 單擊按鈕後：
    repeat-after

例：本示例將附件屬性設置為“滾動”。

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        DOM Style Background Property 
    </title> 
      
    <style>  
        body {  
            background:url(  
'https://media.geeksforgeeks.org/wp-content/uploads/20190311222622/sample-image.png')  
            no-repeat right top / 200px;  
            background-attachment:fixed;  
        }  
        #scrolling-area {  
            height:1000px;  
        }  
    </style>  
</head>  
  
<body>  
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <b>DOM Style Background Property</b> 
      
    <p> 
        Click on the button to set  
        the background color 
    </p> 
      
    <div class="GFG"></div> 
      
    <button onclick="setBg()"> 
        Set background color 
    </button> 
      
    <div id="scrolling-area"><br>  
        This is a large area for scrolling.  
    </div>  
  
    <!-- Script to change backgroundAttachment -->
    <script>  
        function setBg() {  
            document.body.style.backgroundAttachment  
                    = 'scroll';  
        }  
    </script>  
</body>  
  
</html>                     

輸出：

  • 單擊按鈕之前：
    attachment-before
  • 單擊按鈕後：
    attachment-after

例：本示例將背景圖像的位置設置為“中心”。

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        DOM Style Background Property 
    </title> 
      
    <style> 
        .GFG { 
            height:250px; 
            width:250px; 
            border-style:solid; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <b>DOM Style Background Property</b> 
      
    <p> 
        Click on the button to set 
        the background image 
    </p> 
      
    <div class="GFG"></div> 
      
    <button onclick="setBg()"> 
        Set background color 
    </button> 
      
    <!-- Script to set the background color -->
    <script> 
        function setBg() { 
            elem = document.querySelector('.GFG'); 
            elem.style.background =  
"url('https://media.geeksforgeeks.org/wp-content/uploads/20190314004249/sample-image2.png') no-repeat center"; 
        } 
    </script> 
</body> 
  
</html>                    

輸出：


  • 單擊按鈕之前：
    position-before
  • 單擊按鈕後：
    position-after

例：本示例將背景圖片的大小設置為寬度為“ 200px”，高度為“ 150px”。

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        DOM Style Background Property 
    </title> 
      
    <style> 
        .GFG { 
            height:250px; 
            width:250px; 
            border-style:solid; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <b>DOM Style Background Property</b> 
      
    <p> 
        Click on the button to set 
        the background image 
    </p> 
      
    <div class="GFG"></div> 
      
    <button onclick="setBg()"> 
        Set background color 
    </button> 
      
    <!-- Script to set the background color -->
    <script> 
        function setBg() { 
            elem = document.querySelector('.GFG'); 
            elem.style.background =  
"url('https://media.geeksforgeeks.org/wp-content/uploads/20190314004249/sample-image2.png') no-repeat center / 200px 150px "; 
        } 
    </script> 
</body> 
  
</html>                    

輸出：

  • 單擊按鈕之前：
    size-before
  • 單擊按鈕後：
    size-after

例：本示例將背景原點設置為“ border-box”。

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        DOM Style Background Property 
    </title> 
      
    <style> 
        .GFG { 
            height:250px; 
            width:250px; 
            padding:20px; 
            border:10px dotted; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <b>DOM Style Background Property</b> 
      
    <p> 
        Click on the button to set 
        the background image 
    </p> 
  
    <div class="GFG"></div> 
      
    <button onclick="setBg()"> 
        Set background image 
    </button> 
      
    <!-- Script to set background origin property -->
    <script> 
        function setBg() { 
            elem = document.querySelector('.GFG'); 
            elem.style.background =  
"url('https://media.geeksforgeeks.org/wp-content/uploads/20190314004249/sample-image2.png') no-repeat border-box"; 
        } 
    </script> 
</body> 
</html>                    

輸出：

  • 單擊按鈕之前：
    origin-before
  • 單擊按鈕後：
    origin-after

例：本示例將背景剪輯設置為“ content-box”。

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        DOM Style Background Property 
    </title> 
      
    <style> 
        .GFG { 
            height:250px; 
            width:250px; 
            border:10px dotted; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <b>DOM Style Background Property</b> 
      
    <p> 
        Click on the button to set  
        the background color 
    </p> 
      
    <div class="GFG"></div> 
      
    <button onclick="setBg()"> 
        Set background color 
    </button> 
      
    <!-- Script to set background clip property -->
    <script> 
        function setBg() { 
            elem = document.querySelector('.GFG'); 
            elem.style.background = "green content-box"; 
        } 
    </script> 
</body> 
</html>                    

輸出：

  • 單擊按鈕之前：
    clip-before
  • 單擊按鈕後：
    clip-after

例：它將屬性設置為默認值

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        DOM Style Background Property 
    </title> 
      
    <style> 
        .GFG { 
            height:250px; 
            width:250px; 
            border-style:solid; 
            background:green 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <b>DOM Style Background Property</b> 
      
    <p> 
        Click on the button to set the 
        background to initial 
    </p> 
      
    <div class="GFG"></div> 
      
    <button onclick="setBg()"> 
        Set background 
    </button> 
      
    <!-- Script to set background property -->
    <script> 
        function setBg() { 
            elem = document.querySelector('.GFG'); 
            elem.style.background = "initial"; 
        } 
    </script> 
</body> 
  
</html>                    

輸出：

    • 單擊按鈕之前：
      initial-before
  • 單擊按鈕後：
    initial-after

例：它用於從其父項繼承屬性

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        DOM Style Background Property 
    </title> 
      
    <style> 
        .GFG { 
            margin:20px; 
            height:100px; 
            width:100px; 
            border:5px solid; 
        } 
  
        #parent { 
            height:250px; 
            width:250px; 
            border:1px solid; 
            background:  
url('https://media.geeksforgeeks.org/wp-content/uploads/20190314004249/sample-image2.png') center / cover; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <b>DOM Style Background Property</b> 
      
    <p> 
        Click on the button to set 
        the background to inherit 
    </p> 
      
    <div id="parent">  
        <div class="GFG"></div> 
    </div> 
      
    <button onclick="setBg()"> 
        Set background 
    </button> 
      
    <!-- Script to set background property -->
    <script> 
        function setBg() { 
            elem = document.querySelector('.GFG'); 
            elem.style.background = "inherit"; 
        } 
    </script> 
</body> 
  
</html>                    

輸出：

  • 單擊按鈕之前：
    inherit-before
  • 單擊按鈕後：
    inherit-after

支持的瀏覽器：下麵列出了背景屬性支持的瀏覽器：

  • Chrome 1.0
  • Internet Explorer 4.0
  • Firefox 1.0
  • Opera 3.5
  • Safari 1.0


相關用法


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