码迷,mamicode.com
首页 > Web开发 > 详细

CSS3 background-position属性

时间:2020-06-11 20:01:33      阅读:324      评论:0      收藏:0      [点我收藏+]

标签:span   一个   content   ott   char   img   五个   结果   png   

这个属性的官方文档语法:
技术图片
示例代码:

<!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属性

标签:span   一个   content   ott   char   img   五个   结果   png   

原文地址:https://www.cnblogs.com/10yearsmanong/p/13095139.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!