下面是我要用到的一个背景图,250*250像素,坐标值是从左上方开始的,向右和向下伸展的时候,坐标值为负!
这是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;
}
调用方法:
<p class="style1"></p>
<p class="style2"></p>
<p class="style3"></p>
显示效果: