HTML5+CSS3从入门到精通 3分钟了解CSS3 background-position属性-职坐标

HTML5+CSS3从入门到精通 3分钟了解CSS3 background-position属性

沉沙 2018-06-12 来源：阅读 911 评论 0

摘要：本篇教程讲解了CSS3 background-position属性的相关内容，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

这个属性的官方文档语法：
HTML5+CSS3从入门到精通 3分钟了解CSS3 background-position属性示例代码：

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 10px;
            }
            .a{
                float: left;
                height: 300px;width: 300px;
                border: 10px dashed rgb(128,177,211);
                padding: 20px;
             background: url(img/HBuilder.png) no-repeat top left,
                         url(img/HBuilder.png) no-repeat top center,
                         url(img/HBuilder.png) no-repeat top right,
                         url(img/HBuilder.png) no-repeat center left,
                         url(img/HBuilder.png) no-repeat center center,
                         url(img/HBuilder.png) no-repeat center right,
                         url(img/HBuilder.png) no-repeat bottom left,
                         url(img/HBuilder.png) no-repeat bottom center,
                         url(img/HBuilder.png) no-repeat bottom right;
             background-size: 25%;
            }
            .b{
                float: left;
                height: 200px;width: 200px;
                border: 10px dashed rgb(128,177,211);
                padding: 20px;
             background: url(img/HBuilder.png) no-repeat 25% 25%,
                         url(img/HBuilder.png) no-repeat 10% 90%,
                         url(img/HBuilder.png) no-repeat 70%,
                         url(img/HBuilder.png) no-repeat 100% 100%;
            background-size: 30%;
            }
            .c{
                float: left;
                height: 30px;width: 30px;
                border: 10px dashed rgb(128,177,211);
                padding: 20px;
             background: url(img/HBuilder.png) no-repeat -21px -21px;
            }
 
        </style>
    </head>
    <body>
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
    </body></html>

运行结果：
第一个div为五个方向（top bottom left right center）属性，第二个div为百分数属性定位更为自由，第三个div为移动像素属性，若像素值为负，则背景图相对于div向左上方移动（可以在视觉上实现切图效果）。

HTML5+CSS3从入门到精通 3分钟了解CSS3 background-position属性