当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。