Home > Article > Web Front-end > Sample code for background style repeat and no-repeat in CSS

Sample code for background style repeat and no-repeat in CSS

黄舟Original: 2017-07-27 13:18:433937browse

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>New Document</title>
    <meta name="generator" content="EverEdit" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <style type="text/css">
        div{
            width:400px; 
            height:200px;
            padding:8px; 
            border:1px solid #96c2f1;
        }
    </style>
</head>
<body>
    <div style="width:200px; height:100px; border: 1px solid #ff0000;">
    </div>
     
    <div style="padding:8px;border:1px solid #96c2f1;background:#eff7ff;width:400px">
        <img alt="pic" src="zf.jpg">
    </div>
     
    <div style="background:url(zf.jpg);">
    </div>
     
    <div style="background:repeat-x url(zf.jpg);">
        1.repeat-x url(zf.jpg);
    </div>
     
    <div style="background:repeat-y url(zf.jpg);">
        2.repeat-y url(zf.jpg);
    </div>
     
    <div style="background:repeat-x 0px 50px url(zf.jpg);">
        3.repeat-x 0px 50px url(zf.jpg);
    </div>
     
    <div style="background:repeat 25px 25px url(zf.jpg);">
        4.repeat 25px 25px url(zf.jpg);
    </div>
     
    <div style="background:repeat-x bottom url(zf.jpg);">
        5.repeat-x bottom url(zf.jpg);
    </div>
     
    <div style="background:repeat-x left url(zf.jpg);">
        6.repeat-x left url(zf.jpg);
    </div>
     
    <div style="background:no-repeat url(zf.jpg);">
        7.no-repeat url(zf.jpg);
    </div>
     
    <div style="background:no-repeat top  url(zf.jpg);">
        8.no-repeat top url(zf.jpg);
    </div>
     
    <div style="background:no-repeat left url(zf.jpg);">
        9.no-repeat left url(zf.jpg);
    </div>
     
    <div style="background:no-repeat left 100px url(zf.jpg);">
        10.no-repeat left 100px url(zf.jpg);靠左边，则左为0，x坐标取0，只写上下
    </div>
     
    <div style="background:no-repeat right 100px url(zf.jpg);">
        11.no-repeat right 100px url(zf.jpg);靠左边，则左为0，x坐标取0，只写上下
    </div>
     
    <div style="background:no-repeat 100px bottom url(zf.jpg);">
        12.no-repeat 100px bottom url(zf.jpg);靠下（代表上下），所以只用写左右，100px
    </div>
     
    <div style="background:no-repeat -50px 50px url(zf.jpg);">
        13.no-repeat -50px 50px url(zf.jpg);距离左边-50px，上边50px
    </div>
     
    <div style="background:no-repeat -50px  url(zf.jpg);">
        14.no-repeat -50px 距离左边-50px，上下默认，居中
    </div>
     
    <div style="background:no-repeat -50px  top url(zf.jpg);">
        15.no-repeat -50px  top = no-repeat -50px 0px (距离div边界左边-50，上边0px)
    </div>
     
    <div style="background:no-repeat left  top url(zf.jpg);">
        16.no-repeat left  top (靠左上，=(0px，0px),=只有no-repeat
    </div>
</body>
</html>

The above is the detailed content of Sample code for background style repeat and no-repeat in CSS. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed introduction to the importance of !important in CSSNext article：Detailed introduction to the importance of !important in CSS

See more

Sample code for background style repeat and no-repeat in CSS

Related articles