- 所在位置：
- 首页 >
- 编程技术 >
- CSS/HTML >
- 详解用CSS background属性实现切图是怎样的
详解用CSS background属性实现切图是怎样的
Admin 2022-09-24 群英技术资讯 1585 次浏览
在这篇文章中，我们来学习一下“详解用CSS background属性实现切图是怎样的”的相关知识，下文有详细的讲解，易于大家学习和理解，有需要的朋友可以借鉴参考，下面就请大家跟着小编的思路一起来学习一下吧。在网页开发中，我们经常看到有人使用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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
HTML+CSS实现三角形图标的代码是什么
三角形图标运用于很多项目开发中，也是常用的素材之一，实现这个效果我们可以使用Html或者CSS进行绘制。先看看效果图：
-
用HTML5怎样实现长按删除的功能，思路和方法是什么
本篇文章给大家带来的内容是关于移动端HTML5模拟长按删除事件（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
-
CSS中层叠上下文怎样使用？特性有哪些？
这篇文章主要给大家分享关于CSS中层叠上下文的内容，本文对层叠上下文的概念、特性及使用都有详细的介绍，感兴趣的朋友可以参考，接下来跟随小编来学习一下吧。
-
HTML中怎么实现任意拖拽标签的位置
这篇文章主要介绍了html随意拖动内容位置的两种实现方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
-
HTML5 Landmark是什么，怎么使用
这篇文章主要介绍了HTML5 Landmark的相关资料，帮助大家了解和学习Landmark，感兴趣的朋友可以了解下
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册关注或联系群英网络
7x24小时售前：400-678-4567
7x24小时售后：0668-2555666
24小时QQ客服
群英微信公众号
CNNIC域名投诉举报处理平台
服务电话：010-58813000
服务邮箱：service@cnnic.cn
投诉与建议：0668-2555555
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 ICP核准（ICP备案）粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
