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向左上方移动（可以在视觉上实现切图效果）。

CSS3 background-position属性

Care豆儿

引用和评论

hbuilder运行PHP

CSS团队协作规范

前端开发工具

CSS 如何模拟“真实的”进度条？

纯CSS实现有趣emoji切换开关

那些年我用过的SAP IDE

SAP UI5 初学者教程之十三 - 如何添加自定义 CSS 类试读版