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

下面是我要用到的一个背景图,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>

 显示效果：