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

HTML Style backgroundAttachment用法及代碼示例


HTML DOM中的Style backgroundAttachment屬性用於設置或返回背景圖像是固定的還是隨內容滾動。

用法:

  • 它返回backgroundAttachment屬性。
    object.style.backgroundAttachment
  • 它用於設置backgroundAttachment屬性。
    object.style.backgroundAttachment = "scroll|fixed|local|initial|
inherit"

屬性值：每個屬性值的示例說明。


    滾動：此值使背景圖像與元素一起滾動。它是默認值。
  • Example: 
    <!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        DOM Style backgroundAttachment 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; margin-top:100px;"> 
        GeeksforGeeks 
    </h1> 
      
    <b>DOM Style backgroundAttachment Property</b> 
      
    <p> 
        Click on the button to change the attachment 
        of the background image to 'scroll'. 
    </p> 
      
    <button onclick="changeAttachment()"> 
        Change attachment 
    </button> 
      
    <div id="scrolling-area"><br> 
        This is a large area for scrolling. 
    </div> 
  
    <!-- Script to change backgroundAttachment -->
    <script> 
        function changeAttachment() { 
            document.body.style.backgroundAttachment 
                    = 'scroll'; 
        } 
    </script> 
</body> 
  
</html>                    
  • Output:
    在單擊按鈕之前：
    scroll-before
    單擊按鈕後：
    scroll-after

    • 固定：此值可使背景圖像相對於視口固定。

  • Example: 
    <!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        DOM Style backgroundAttachment Property 
    </title> 
      
    <style> 
        body { 
            background:url( 
'https://media.geeksforgeeks.org/wp-content/uploads/20190311222622/sample-image.png') 
            no-repeat right top / 200px; 
        } 
        #scrolling-area { 
            height:1000px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green; margin-top:100px;"> 
        GeeksforGeeks 
    </h1> 
      
    <b>DOM Style backgroundAttachment Property</b> 
      
    <p> 
        Click on the button to change the attachment 
        of the background image to 'scroll'. 
    </p> 
      
    <button onclick="changeAttachment()"> 
        Change attachment 
    </button> 
      
    <div id="scrolling-area"><br> 
        This is a large area for scrolling. 
    </div> 
  
    <!-- Script to change backgroundAttachment -->
    <script> 
        function changeAttachment() { 
            document.body.style.backgroundAttachment 
                    = 'fixed'; 
        } 
    </script> 
</body> 
  
</html>                    
  • Output:
    在單擊按鈕之前：
    fixed-before
    單擊按鈕後：
    fixed-after

    • 本地：此值可使背景圖像隨元素的內容一起滾動。

  • Example: 
    <!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        DOM Style backgroundAttachment 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; margin-top:100px;"> 
        GeeksforGeeks 
    </h1> 
      
    <b>DOM Style backgroundAttachment Property</b> 
      
    <p> 
        Click on the button to change the attachment 
        of the background image to 'scroll'. 
    </p> 
      
    <button onclick="changeAttachment()"> 
        Change attachment 
    </button> 
      
    <div id="scrolling-area"><br> 
        This is a large area for scrolling. 
    </div> 
  
    <!-- Script to change backgroundAttachment -->
    <script> 
        function changeAttachment() { 
            document.body.style.backgroundAttachment 
                    = 'local'; 
        } 
    </script> 
</body> 
  
</html>                    
  • Output:
    在單擊按鈕之前：
    local-before
    單擊按鈕後：
    local-after

    • 初始值：用於將此屬性設置為其默認值。

  • Example: 
    <!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        DOM Style backgroundAttachment 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; margin-top:100px;"> 
        GeeksforGeeks 
    </h1> 
      
    <b>DOM Style backgroundAttachment Property</b> 
      
    <p> 
        Click on the button to change the attachment 
        of the background image to 'scroll'. 
    </p> 
      
    <button onclick="changeAttachment()"> 
        Change attachment 
    </button> 
      
    <div id="scrolling-area"><br> 
        This is a large area for scrolling. 
    </div> 
  
    <!-- Script to change backgroundAttachment -->
    <script> 
        function changeAttachment() { 
            document.body.style.backgroundAttachment 
                    = 'initial'; 
        } 
    </script> 
</body> 
  
</html>                    
  • Output:
    在單擊按鈕之前：
    initial-before
    單擊按鈕後：
    initial-after

    • 繼承：它從其父元素繼承屬性。

  • Example: 
    <!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        DOM Style backgroundAttachment Property 
    </title> 
      
    <style> 
        .bg-img { 
            height:150px; 
            background:url( 
'https://media.geeksforgeeks.org/wp-content/uploads/20190311222622/sample-image.png')  
            no-repeat right top / 200px; 
        } 
  
        #parent { 
            background-attachment:fixed; 
            height:1000px; 
        } 
    </style> 
</head> 
  
<body> 
    <div id="parent"> 
        <div class="bg-img"></div> 
          
        <h1 style="color:green;"> 
            GeeksforGeeks 
        </h1> 
          
        <b> 
            DOM Style backgroundAttachment Property 
        </b> 
          
        <p> 
            Click on the button to change the attachment 
            of the background image to 'inherit'. 
        </p> 
          
        <button onclick="changeAttachment()"> 
            Change attachment 
        </button> 
    </div> 
  
    <!-- Script to change backgroundAttachment property -->
    <script> 
        function changeAttachment() { 
            elem = document.querySelector('.bg-img'); 
            elem.style.backgroundAttachment = 'inherit'; 
        } 
    </script> 
</body> 
  
</html>                    
  • Output:
    在單擊按鈕之前：
    inherit-before
    單擊按鈕後：
    inherit-after

支持的瀏覽器：以下列出了DOM Style backgroundAttachment屬性支持的瀏覽器：

  • 穀歌瀏覽器1.0
  • Internet Explorer 4.0
  • Firefox 1.0
  • Opera 3.5
  • Safari 1.0


相關用法


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