怎么新建MySQL数据库
阅读：361
在网页开发中，我们经常看到有人使用css background-position属性来做切图，为什么要使用css Sprite切图技术呢？
css Sprite切图技术主要就是将多张图片放在一张图片里面，这有助于减少http网页请求，并且提高网页的性能，对SEO也有很大的帮助，css Sprite切图技术主要使用到了css中的“background-image”，“background- repeat”，“background-position”，“width”，“height”等属性对div背景进行设定，例如我们要切开如下这张图里面的图标。
我们要使用css background-position属性来定位到上面图片中的某张图标，然后将某个图标切下来，该如何理解呢？可以先看一下下面这种图：
上图红色框框表示的是：内部一个div，上面是一张大图片，里面有三个小图片，他们的左上角是重合的，横纵坐标是“0,0”如果我们想要把其中的一张图加成div的背景，div坐标保持不变，该小图就应该平移，先向左移动，移动的距离记录为负数，然后再向上移动，也记录为负数。
我们开发者想要知道大图里面的小图标向左向上移动的距离应该是多少？要么自己打开photoshop，并点击窗口---信息菜单，就会显示你鼠标的坐标，然后将鼠标放在图标左上角，就可以显示大图片里面小图标的坐标了。
要么就是美工在切图的时候，直接将每个小图标里面的坐标，宽高大小告诉我们网页开发者，然后我们就可以使用css background-position属性来设置背景图片的位置了，如下图标就是获取大图片中小图标的方法。
上图假如我们要使用HOT图标作为背景，就用photoshop调出坐标工具，以像素为单位，然后ps的矩形选框工具，选择这个图标，将鼠标放在图标左上角的位置，就会显示该图标所在大图片的横纵坐标以及宽度与高度了，此时我们就可以使用css background-position来切图了，代码如下：
<!DOCTYPE HTML>
<html>
<style>
.imgDiv{
width:35px;
height:34px;
background-image: url(xiaotubiao.png);
background-position: -149px -380px;
}
.imgDiv2{
width:28px;
height:14px;
background-image: url(xiaotubiao.png);
background-position: -149px -429px;
}
</style>
<body>
<div class="imgDiv"></div>
<div class="imgDiv2" style="margin-top:50px;"></div>
</body>
</html>
上面小编切掉了“hot图标”与“包邮”这两张图标，效果如下：
这样就简单的完成了css Sprite切图技术，“background-position: -149px -380px;”表示HOT图标向左偏移距离为149px，向上偏移距离为380px。
这篇关于“详解用CSS background属性实现切图是怎样的”的文章就介绍到这了,更多相关的内容，欢迎关注群英网络，小编将为大家输出更多高质量的实用文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
相关阅读
长按识别二维码并关注微信
更方便到期提醒、手机管理