admin管理员组文章数量:1612145
前言：大家肯定都试过给元素添加背景background，并且用的绝对不少，但是其中的background-position，你真的了解吗？
我们往往要把页面的中的众多图标合并成一张雪碧图，已减少对服务器的图片请求次数。pc端处理雪碧图是很好处理，但是移动端如果不熟悉background-size跟background-position，处理起来还是有很大麻烦的。
一、例子①
测试图片：
<body>
<style>
.box1 { width:200px; height:200px; background:#ccc url(test.png) no-repeat; background-position:20px 20px;
margin-bottom:10px; }
.box2 { width:200px; height:200px; background:#ccc; position:relative; }
.box2 .child { width:100px; height:100px; background:#d01123; position:absolute; top:20px; left:20px; }
</style>
<div >
</div>
<div >
<div ></div>
</div>
</body>运行结果：
这个毫无问题，第一个是用测试图片做的背景图，而第二个是用div进行定位的。.child的top跟left都是20px;
二、例子②
让背景图的position为20% 30%
<body>
<style>
.box1 { width:200px; height:200px; background:#ccc url(test.png) no-repeat; background-position:20% 30%;
margin-bottom:10px; }
.box2 { width:200px; height:200px; background:#ccc; position:relative; }
.box2 .child { width:100px; height:100px; background:#d01123; position:absolute; left:20%; top:30%; }
</style>
<div >
</div>
<div >
<div ></div>
</div>
</body>运行结果：
问题出现了。background-position:20% 20%;设置的背景图片，水平垂直居中了。而box2中的div定位是top:20%； left:20%; 效果上出现了很大差异。
三、问题原因
①上个例子中的box2 下div的postion定位的值为百分比，是根据父级的宽度高度来计算的。
box2的宽度为200px, child的left为20%； 既转化为200*20%=40px;
box2的高度为200px, child的top为50%； 既转化为200*30%=60px;
本文标签： 雪碧陷阱cssbackgroundPosition
版权声明：本文标题：【css】background-position陷阱与移动端雪碧图处理 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1728605204a1165361.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论