图片来自网络<html>
copy 到记事本展示下。
<html>
<meta charset="UTF-8">
<style>
.div{background-image:url(test.png); background-repeat: no-repeat;}
.div1{width:80px; height:60px; background-position:0 0;}
.div2{width:144px; height:78px; background-position:-355px -153px;}
.div3{width:55px; height:125px; background-position:-446px -266px;}
.div4{width:70px; height:162px; background-position:0px -191px;}
.div5{width:75px; height:60px; background-position:0px -90px;}
</style>
<head>
<body>
<div class="div div1"></div>
<div class="div div2"></div><br>
<div class="div div3"></div><br>
<div class="div div4"></div><br>
<div class="div div5"></div><br>
</body>
</html>
红色为例：
首先用ps 打开图片--
这是 可以看到图片的宽、高，高度就比较明显{width:55px; height:125px;} 用下边的刻度-上边的刻度 =高，右边的刻度-左边的刻度=宽。 这个就没必要浪费口水啦。^_^
这里主要看下 background-position 是怎样移动的。
这里的刻度线就是我们想要的值：
说点废话（分为X轴水平的，Y轴垂直，图片显示区域为X轴下方，那么取值都应该为负值（-xp），指定图片显示区域也就是高与宽） 。
看到x轴值为：-446px y轴为:-226px .
这时图片会移动左上边对角处~~~~~
如果不懂看下运行下demo在结合PS查看刻度 。就不言而喻。
6788
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
