首页 / CSS / CSS中关于background样式repeat与no-repeat的示例代码

CSS中关于background样式repeat与no-repeat的示例代码

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS中关于background样式repeat与no-repeat的示例代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2460字，纯文字阅读大概需要4分钟。

内容图文

CSS中关于background样式repeat与no-repeat的示例代码
<!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>
    &nbsp;
    <div style="padding:8px;border:1px solid #96c2f1;background:#eff7ff;width:400px">
        <img alt="pic" src="zf.jpg">
    </div>
    &nbsp;
    <div style="background:url(zf.jpg);">
    </div>
    &nbsp;
    <div style="background:repeat-x url(zf.jpg);">
        1.repeat-x url(zf.jpg);
    </div>
    &nbsp;
    <div style="background:repeat-y url(zf.jpg);">
        2.repeat-y url(zf.jpg);
    </div>
    &nbsp;
    <div style="background:repeat-x 0px 50px url(zf.jpg);">
        3.repeat-x 0px 50px url(zf.jpg);
    </div>
    &nbsp;
    <div style="background:repeat 25px 25px url(zf.jpg);">
        4.repeat 25px 25px url(zf.jpg);
    </div>
    &nbsp;
    <div style="background:repeat-x bottom url(zf.jpg);">
        5.repeat-x bottom url(zf.jpg);
    </div>
    &nbsp;
    <div style="background:repeat-x left url(zf.jpg);">
        6.repeat-x left url(zf.jpg);
    </div>
    &nbsp;
    <div style="background:no-repeat url(zf.jpg);">
        7.no-repeat url(zf.jpg);
    </div>
    &nbsp;
    <div style="background:no-repeat top  url(zf.jpg);">
        8.no-repeat top url(zf.jpg);
    </div>
    &nbsp;
    <div style="background:no-repeat left url(zf.jpg);">
        9.no-repeat left url(zf.jpg);
    </div>
    &nbsp;
    <div style="background:no-repeat left 100px url(zf.jpg);">
        10.no-repeat left 100px url(zf.jpg);靠左边，则左为0，x坐标取0，只写上下
    </div>
    &nbsp;
    <div style="background:no-repeat right 100px url(zf.jpg);">
        11.no-repeat right 100px url(zf.jpg);靠左边，则左为0，x坐标取0，只写上下
    </div>
    &nbsp;
    <div style="background:no-repeat 100px bottom url(zf.jpg);">
        12.no-repeat 100px bottom url(zf.jpg);靠下（代表上下），所以只用写左右，100px
    </div>
    &nbsp;
    <div style="background:no-repeat -50px 50px url(zf.jpg);">
        13.no-repeat -50px 50px url(zf.jpg);距离左边-50px，上边50px
    </div>
    &nbsp;
    <div style="background:no-repeat -50px  url(zf.jpg);">
        14.no-repeat -50px 距离左边-50px，上下默认，居中
    </div>
    &nbsp;
    <div style="background:no-repeat -50px  top url(zf.jpg);">
        15.no-repeat -50px  top = no-repeat -50px 0px (距离div边界左边-50，上边0px)
    </div>
    &nbsp;
    <div style="background:no-repeat left  top url(zf.jpg);">
        16.no-repeat left  top (靠左上，=(0px，0px),=只有no-repeat
    </div>
</body>
</html>

CSS中关于background样式repeat与no-repeat的示例代码 - 文章图片

以上就是CSS中关于background样式repeat与no-repeat的示例代码的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的CSS中关于background样式repeat与no-repeat的示例代码全部内容，希望文章能够帮你解决CSS中关于background样式repeat与no-repeat的示例代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/413137.html

来源：【匿名】