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


CSS background-repeat用法及代码示例


CSS中的background-repeat属性用于水平和垂直重复背景图像。它还决定是否重复background-image。

用法

background-repeat:repeat|repeat-x|repeat-y|no-repeat|initial|
inherit;

属性值


重复:此属性用于水平和垂直重复背景图像。如果最后一个图像不适合浏览器窗口,则会被裁剪。

  • 用法:
    element {
        background-repeat:repeat;
    }
  • 例:
    <!DOCTYPE html> 
    <html> 
        <head> 
            <title>background-repeat property</title> 
            <style> 
                body { 
                    background-image:url( 
    "https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png"); 
                    background-repeat:repeat; 
                    background-size:200px 150px; 
                    text-align:center; 
                } 
            </style> 
        </head> 
        <body> 
            <h1>GeeksforGeeks</h1> 
            <h2>background-repeat:repeat;</h2> 
        </body> 
    </html>                    
  • 输出:

repeat-x:此属性用于水平重复背景图像。

  • 用法:
    element {
        background-repeat:repeat-x;
    }
  • 例:
    <!DOCTYPE html> 
    <html> 
        <head> 
            <title>background-repeat property</title> 
            <style> 
                body { 
                    background-image:url( 
    "https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png"); 
                    background-repeat:repeat-x; 
                    background-size:200px 150px; 
                    text-align:center; 
                } 
            </style> 
        </head> 
        <body> 
            <h1>GeeksforGeeks</h1> 
            <h2>background-repeat:repeat-x;</h2> 
        </body> 
    </html>                    
  • 输出:

repeat-y:此属性用于设置仅垂直重复的背景图像。

  • 用法:
    element {
        background-repeat:repeat-y;
    }
  • 例:
    <!DOCTYPE html> 
    <html> 
        <head> 
            <title>background-repeat property</title> 
            <style> 
                body { 
                    background-image:url( 
    "https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png"); 
                    background-repeat:repeat-y; 
                    background-size:200px 150px; 
                    text-align:center; 
                } 
            </style> 
        </head> 
        <body> 
            <h1>GeeksforGeeks</h1> 
            <h2>background-repeat:repeat-y;</h2> 
        </body> 
    </html>                    
  • 输出:

no-repeat:此属性不重复背景图像。它仅显示背景图像一次。

  • 用法:
    element {
        background-image:no-repeat;
    }
  • 例:
    <!DOCTYPE html> 
    <html> 
        <head> 
            <title>background-repeat property</title> 
            <style> 
                body { 
                    background-image:url( 
    "https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png"); 
                    background-repeat:no-repeat; 
                    background-size:400px 250px; 
                    text-align:center; 
                } 
            </style> 
        </head> 
        <body> 
            <h1>GeeksforGeeks</h1> 
            <h2>background-repeat:no-repeat;</h2> 
        </body> 
    </html>                    
  • 输出:

支持的浏览器:background-repeat属性支持的浏览器如下所示:

  • 谷歌浏览器1.0
  • Internet Explorer 4.0
  • Firefox 1.0
  • Opera 3.5
  • 苹果Safari 1.0


相关用法


注:本文由纯净天空筛选整理自ManasChhabra2大神的英文原创作品 CSS | background-repeat Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。