CSS中背景background-position负值定位深入理解

最新推荐文章于 2023-06-08 18:08:02 发布

weixin_34087307

最新推荐文章于 2023-06-08 18:08:02 发布

阅读量192

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/bsijl/archive/2013/03/30/2990354.html

本文介绍了一种使用CSS对背景图进行精确位置控制的方法。通过调整背景图片的位置属性，可以在不同坐标点展示同一背景图的不同部分。这种方法适用于需要对背景图进行精确控制的设计场景。

下面是我要用到的一个背景图,250*250像素,坐标值是从左上方开始的，向右和向下伸展的时候，坐标值为负！

这是css样式结构

<style type="text/css">
        .style1 {
            color: #FFFF00;
            background: url(style/坐标图.png) no-repeat;
            background-position: -25px -25px;
            height: 50px;
            width: 50px;
        }

        .style2 {
            color: #FFFF00;
            background: url(style/坐标图.png) no-repeat;
            background-position: -75px -75px;
            height: 50px;
            width: 50px;
        }

        .style3 {
            color: #FFFF00;
            background: url(style/坐标图.png) no-repeat;
            background-position: -125px -125px;
            height: 50px;
            width: 50px;
        }
    </style>

调用方法：

 <p class="style1"></p>
 <p class="style2"></p>
 <p class="style3"></p>

显示效果：

转载于:https://www.cnblogs.com/bsijl/archive/2013/03/30/2990354.html