CSS3 background-position属性

这个属性的官方文档语法:
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属性

CSS3 background-position属性

上一篇:.NETCORE异常捕获的管道实现方式(中间件)


下一篇:2020-06-11-ASP.NET Core Blazor 子组件父组件数据同步的问题