admin管理员组文章数量:1611937
前言:大家肯定都试过给元素添加背景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://m.elefans.com/xitong/1728605204a1165361.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论