CSS中精灵图的使用

最新推荐文章于 2025-03-15 18:44:02 发布
最新推荐文章于 2025-03-15 18:44:02 发布
阅读量1.3k 收藏 5
点赞数 1
分类专栏： 前端 文章标签： 精灵图 CSS ps
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43093230/article/details/98597422
版权

如何使用精灵图

以京东网中的底部版权为例（jd.com）

在这里插入图片描述

下面是运行之后的结果（使用CSS样式的background-position属性定位在精灵图中的位置，即获取想要的一部分）：
在这里插入图片描述

先确定小图标在精灵图中的位置
打开ps，拖入精灵图，使用拖动参考线来确定小图标的坐标（X，Y），X、Y均为负值，由于处于第四象限。
如图所示五个小图标的位置即可确定。
在这里插入图片描述
那怎么在CSS中使用呢？
如下有关代码
html部分

	<!-- footer-S -->
	<footer>
		<!-- service-S -->
		<div class="service">
			<div class="w">
				<ul>
					<li>
						<!-- 此处使用精灵图“多” -->
						<h5 class="fl">多</h5>
						<p>品类齐全，轻松购物</p>
					</li>
					<li>
						<!-- 此处使用精灵图“快” -->
						<h5 class="fl">快</h5>
						<p>多仓直发，极速配送</p>
					</li>
					<li>
					<!-- 此处使用精灵图“好” -->
						<h5 class="fl">好</h5>
						<p>正品行货，精致服务</p>
					</li>
					<li>
					<!-- 此处使用精灵图“省” -->
						<h5 class="fl">省</h5>
						<p>天天低价，畅选无忧</p>
					</li>
				</ul>
			</div>
		</div>
		<!-- service-E -->
		<!-- help-S -->
		<div class="w help">
			<div class="fl">
				<dl class="fl">
					<dt>购物指南</dt>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>

				</dl>
				<dl class="fl">
					<dt>购物指南</dt>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dt>

				</dl>
				<dl class="fl">
					<dt>购物指南</dt>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>

				</dl>
				<dl class="fl">
					<dt>购物指南</dt>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>

				</dl>
				<dl class="fl">
					<dt>购物指南</dt>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>

				</dl>
			</div>
			<div class="fr coverage">
				<h5>京东自营覆盖区县</h5>
				<p>京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p>
				<a class="fr">查看详情 ></a>
			</div>
		</div>
		<!-- help-E -->
		<div class="w copyright">
			<p>
				<a>关于我们</a><span>|</span><a>联系我们</a><span>|</span><a>联系客服</a><span>|</span>
				<a>合作招商</a><span>|</span><a>商家帮助</a><span>|</span><a>营销中心</a><span>|</span>
				<a>手机京东</a><span>|</span><a>友情链接</a><span>|</span><a>销售联盟</a><span>|</span>
				<a>京东社区</a><span>|</span><a>风险监测</a><span>|</span><a>隐私政策</a><span>|</span>
				<a>京东公益</a><span>|</span><a>English Site</a><span>|</span><a>Media & IR</a>
			</p>
			<div>
				<p>京公网安备
					11000002000088号<span>|</span>京ICP证070359号<span>|</span>互联网药品信息服务资格证编号(京)-经营性-2014-0008<span>|</span>新出发京零&nbsp字第大120007号
				</p>
				<p>互联网出版许可证编号新出网证(京)字150号<span>|</span>出版物经营许可证<span>|</span>网络文化经营许可证京网文[2014]2148-348号<span>|</span>违法和不良信息举报电话：4006561155
				</p>
				<p>Copyright © 2004 - 2019 京东JD.com
					版权所有<span>|</span>消费者维权热线：4006067733经营证照<span>|</span>(京)网械平台备字(2018)第00003号|营业执照</p>
				<!-- 此处使用精灵图小国旗部分 -->
				<p class="country">
					<a href="#">
						<i></i>Global Site
					</a>
					<span>|</span>
					<a href="#">
						<i></i>Сайт России
					</a>
					<span>|</span>
					<a href="#">
						<i></i>Situs Indonesia
					</a>
					<span>|</span>
					<a href="#">
						<i></i>Sitio de España
					</a>
					<span>|</span>
					<a href="#">
						<i></i>เว็บไซต์ประเทศไทย
					</a>
				</p>
				<p class="friendly">
					<span>京东旗下网站:</span>
					<a>京东钱包</a>
					<span>|</span>
					<a>京东云</a>
				</p>
				<p class="auth">
				<!-- 此处使用精灵图 -->
					<a>可信网站评估</a>
					<a>可信网站评估</a>
					<a>可信网站评估</a>
					<a>可信网站评估</a>
					<a>可信网站评估</a>
				</p>
			</div>
		</div>
	</footer>
	<!-- footer-E -->

css部分：

/* 版权部分样式 */

footer {
    height: 580px;
    margin-top: 35px;
    background-color: #EAEAEA;
}

.service {
    padding: 30px 0;
    border-bottom: 1px solid #DEDEDE;
}

.service ul li {
    width: 293px;
    height: 43px;
    line-height: 43px;
    display: inline-block;
    
}
/* 多快好省精灵图样式 */
.service li h5 {
    position: relative;
    top: 0;
    left: 38px;
    width: 37px;
    height: 43px;
    background: url("../img/footer.png");
    background-position: 0 -192px;
    text-indent: -999px;
}

.service li:nth-child(2) h5 {
    position: relative;
    top: 0;
    left: 38px;
    width: 37px;
    height: 43px;
    background: url("../img/footer.png");
    background-position: -41px -192px;
    text-indent: -999px;
}

.service li:nth-child(3) h5 {
    position: relative;
    top: 0;
    left: 38px;
    width: 37px;
    height: 43px;
    background: url("../img/footer.png");
    background-position: -82px -192px;
    text-indent: -999px;
}

.service li:nth-child(4) h5 {
    position: relative;
    top: 0;
    left: 38px;
    width: 37px;
    height: 43px;
    background: url("../img/footer.png");
    background-position: -123px -192px;
    text-indent: -1999px;
}

.service li p {
    font-weight: 700;
    margin-left: 82px;
}

.help {
    height: 200px;
    border-bottom: 1px solid #DEDEDE;
    padding-top: 25px;
    box-sizing: border-box;
}

.help dl {
    height: 192px;
    width: 190px;
}

.coverage h5, .help dt {
    height: 30px;
    font-size: 14px;
    color: #666666;
}

.help dd {
    height: 22px;
}

.coverage {
    width: 200px;
    height: 150px;
    background: url("../img/footer.png")no-repeat;
    background-position: 0 0;
}

.coverage h5 {
    padding-left: 35px;
}

.coverage p {
    font-size: 12px;
    color: #666666;
    line-height: 18px;
    width: 180px;
}

.coverage a {
    margin-top: 5px;
    display: block;
    width: 180px;
    text-align: right;
}

/* 版权 */

.copyright {
    padding-top: 20px;
    text-align: center;
    /* background: #c81623; */
    /* color: #555; */
    font-size: 12px;
}

.copyright a, .copyright div p a {
    color: #666;
}

.copyright span {
    margin: 0 10px;
    color: #ccccd7;
}

.copyright div {
    margin-top: 20px;
}

.copyright div p {
    line-height: 22px;
    color: #999999;
}

/* 国家小图标部分样式*/
.copyright div .country a{
    color: #999;
}
.country a i {
    background-size: 113px 86.5px;
    margin-top: -1px;
    width: 15px;
    height: 12px;
    vertical-align: -1px;
    margin-right: 10px;
    background: url(../img/footer.png )no-repeat;
    background-position: -108px -155px;
    display: inline-block;
}

/* nth:child()的用法，不管元素类型 */

.country a:nth-child(3) i {
    background-size: 113px 86.5px;
    margin-top: -1px;
    width: 15px;
    height: 12px;
    vertical-align: -1px;
    margin-right: 10px;
    background: url(../img/footer.png )no-repeat;
    background-position: -168px -154px;
    display: inline-block;
}

.country a:nth-child(5) i {
    background-size: 113px 86.5px;
    margin-top: -1px;
    width: 15px;
    height: 12px;
    vertical-align: -1px;
    margin-right: 10px;
    background: url(../img/footer.png )no-repeat;
    background-position: -148px -153px;
    display: inline-block;
}

.country a:nth-child(7) i {
    background-size: 113px 86.5px;
    margin-top: -1px;
    width: 15px;
    height: 12px;
    vertical-align: -1px;
    margin-right: 10px;
    background: url(../img/footer.png )no-repeat;
    background-position: -128px -153px;
    display: inline-block;
}

.country a:nth-child(9) i {
    background-size: 113px 86.5px;
    margin-top: -1px;
    width: 15px;
    height: 12px;
    vertical-align: -1px;
    margin-right: 10px;
    background: url(../img/footer.png )no-repeat;
    background-position: -108px -170px;
    display: inline-block;
}

.friendly {
    display: inline-block;
    height: 22px;
    /* background: #c81623; */
}

.copyright div .friendly span {
    font-size: 12px;
    color: #999;
}
.copyright div .friendly a {
    font-size: 12px;
    color: #999;
}

.auth{
    margin: 25px 0;
}
.auth a{
    overflow: hidden;
    display: inline-block;
    margin: 0 3px;
    width: 103px;
    height: 32px;
    background: url(../img/footer.png)no-repeat;
    background-position: -205px -111px;
    text-indent: -999px;
}
.auth a:nth-child(2){
    overflow: hidden;
    display: inline-block;
    margin: 0 3px;
    width: 103px;
    height: 32px;
    background: url(../img/footer.png)no-repeat;
    background-position: -205px -111px;
    text-indent: -999px;
}

.auth a:nth-child(3){
    overflow: hidden;
    display: inline-block;
    margin: 0 3px;
    width: 103px;
    height: 32px;
    background: url(../img/footer.png)no-repeat;
    background-position: -205px -111px;
    text-indent: -999px;
}
.auth a:nth-child(4){
    overflow: hidden;
    display: inline-block;
    margin: 0 3px;
    width: 103px;
    height: 32px;
    background: url(../img/footer.png)no-repeat;
    background-position: -205px -111px;
    text-indent: -999px;
}
.auth a:nth-child(5){
    overflow: hidden;
    display: inline-block;
    margin: 0 3px;
    width: 103px;
    height: 32px;
    background: url(../img/footer.png)no-repeat;
    background-position: -205px -111px;
    text-indent: -999px;
}

注意： CSS样式中 ：nth-child(n)的使用:
n的大小应该是在同级标签下的第n标签，不管类型是否相同。

欢迎指正~~@ -@~~

HTML5精灵图、渐变及放射渐变
qq_48000288的博客
12-01 776
实现原理：将多张图片整合在一起，然后一次性引入到网站中，减少网络请求，以提高网站的性能实现步骤：1、先确定好你要使用哪个图片或者图标2、测量图片的大小 例如：290*3003、根据测量的结果去建一个盒子，对外展示4、将图片作为背景图引入到盒子中5、设置图片的位置，以正确的显示图片background-position：水平方向 垂直方向值；水平方向：正值 图片向右，负值 图片向左垂直方向：正值 图片向下，负值 图片向上。
详解css图像拼合技术（精灵图）
09-22
同样的逻辑应用于`.span02`和`.span03`，分别对应精灵图中的不同部分。 这种技术的优点在于： 1. **减少HTTP请求**：将多个图像合并为一个文件，降低服务器负载。 2. **节省带宽**：因为文件更少，下载的数据总量...
css学习之精灵图的使用
qq_44330871的博客
09-17 423
精灵图技术适用于背景图片，把多个小背景图片整合到一张大图片中。 1.背景设置为精灵图，background：url（）； 2.移动背景图片的位置，使用background-position，移动距离是目标图片的x和y坐标（往左往上是负值）。 3.步骤1，2 合起来写，如：background：url(img/sprites.png) no-repeat x y ； ...
CSS Sprite (精灵图/雪碧图)
最新发布
jyl919221lc的博客
03-15 588
合入background*/减少 HTTP 请求。
一文搞懂css中精灵图如何使用
2401_84435838的博客
07-14 613
也会容易搞乱图片的位置,每一块大盒子使用一个精灵图,或者某一功能使用同一个精灵图，会极大地提高开发体验。3.就服务器而言：许多小图标的传输,需要服务器与浏览器交互很多次,即影响用户体验又不安全这个大图的存在使得浏览器与服务器交互的次数大大缩减（减轻服务器的压力）三、怎样使用精灵图这个属性以前讲背景的时候提到过,作用是改变背景图的位置,现在使用精灵图也是使用这个属性,通过修改这个属性达到改变精灵图的位置,从而使大图上的小图展示在人的眼前。
css精灵图
咖啡杯里的茶
03-11 1345
什么是精灵图 所谓的精灵图就是将多个图片放置在一个大的图片上面。精灵图主要是用来当做背景图时使用，之所以要将多个图片放置在一个大的图片上面是因为很多时候我们的背景图是放置在服务器上面的，当我们需要使用到某一张图片的时候就会向服务器请求资源，如果图片是分离的那么用到一张的时候就要请求一次，这样服务器的压力会比较大，所以可以将多个图片整合到一个图片的上面，这样当请求资源的时候请求的次数就会变少很多，可...
css精灵图压缩工具
08-10
CSS精灵图压缩工具则是专门用来处理这种合并过程的软件或在线服务，使得开发者能够更便捷地管理和使用精灵图。 精灵图的核心原理是利用CSS背景定位技术。通过设置元素的背景图像为精灵图，并调整背景的位置，可以...
css精灵图片
10-31
css精灵图片配图
css Sprites精灵图制作
09-07
css Sprites精灵图制作。加快网页加载速度 浏览器接受的同时请求数是10个，如果图片过多会影响整体的视觉效果，而且对于不稳定的网络带宽，加载起来更是噩梦，所以把图片拼接为一张大图，从而加快加载速度，以及...
下图精灵V1.0免费版（网店图片批量下载，支持淘宝天猫京东阿里巴巴）
06-21
下图精灵是一款图片批量下载软件，能高速中下载网店中的主图和详情页，并分类排序
CSS精灵图标使用技巧
1853
10-20 332
CSS精灵图标使用技巧 将图片的基础代码写在公用样式内 [class^="icon_"]{ background: url(../image/test.png) no-repeat; background-size: 200px 200px; }
css精灵的使用
oneblue123的博客
06-05 1371
css精灵的使用     CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。　　在网页访问中，客户端每需要访问一张图片都会向服务器发送请
css精灵
www.phptuku.com——PHP全栈工程师的摇篮！
10-31 528
更多内容请访问PHP图库 1.原图如下: 2.效果图如下： 3.代码如下:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <meta name="apple-mobile-web-app-capable" content="yes"> <meta
精灵图、兼容性
xxxjun_的博客
11-09 132
1.精灵图/雪碧图 sprites 概念:由多张图组合成的一张图 实现步骤: 1.实现一个指定带下的盒子 2.讲精灵图设置为该盒子的背景图 3.通过background-position属性,设置背景图的起始位置 优缺点: 减少访问次数,提升性能 占用内存小 文件数量小，命名难度小 缺点:增删图片麻烦...
H5 40-CSS精灵图
weixin_30794491的博客
03-19 178
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>40-CSS精灵图</title> <style> .box{ width: 86px; ...
HTML5和css样式精灵图和字体图标的使用
m0_64450406的博客
07-12 946
精灵图（Sprite），也被称为CSS Sprites或雪碧图，是一种优化网页性能的技术。该技术通过将多个小图标、图像或其他图形元素合并成一个单一的图像文件，并利用CSS来控制每个图形元素的显示位置和尺寸，以减少HTTP请求的数量，从而提高页面加载速度。1.如果遇到一些结构和样式比较简单的小图标,就用字体图标。2.如果遇到些结构和样式复杂-点的小图片 ,就用精灵图。
HTML5前端开发入门之CSS背景属性及精灵图
qq_41886761的博客
12-23 668
背景属性 1.如何在css中设置标签背景颜色？ 在css中有一个background-color：属性，就是专门用来设置标签的背景颜色的   取值： 具体的单词 rgb rgba 十六进制   2.如何在css中设置标签背景图片？ 在css中有一个background-image：url（）;的属性  就是专门用于设置背景图片的    注意点：  1.图片的地址必须放...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值