web前端技术笔记（五）雪碧图、布局实例、图片格式

最新推荐文章于 2025-07-19 17:50:22 发布
最新推荐文章于 2025-07-19 17:50:22 发布
阅读量879 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27251475/article/details/115013715
本文介绍了网页设计中的雪碧图技术、背景固定方法、布局实例及图片格式的选择，帮助设计师提高网页性能，实现美观且高效的页面布局。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

雪碧图

雪碧图，就是将网页制作中使用的多个小图片合并成一个图片，使用css技术将这张合成的图片应用在网页不同的地方，雪碧图可以减少网页加载时的http请求数，优化网页性能。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>雪碧图列表</title>
	<style type="text/css">
		
		.list{
			list-style:none;
			width:300px;
			height:305px;
			margin:50px auto 0;
			padding:0;
			/* background:cyan; */
		}

		.list li{
			height:60px;
			border-bottom:1px dotted #000;
			line-height:60px;
			text-indent:50px;
			background:url(images/bg01.png) 0px 10px no-repeat;
		}

		.list .icon02{
			background-position:0px -71px;
		}
		.list .icon03{
			background-position:0px -154px;
		}
		.list .icon04{
			background-position:0px -235px;
		}
		.list .icon05{
			background-position:0px -315px;
		}

	</style>
</head>
<body>
	<!-- ul.list>li{美人鱼}*5 -->
	
	<ul class="list">
		<li>美人鱼</li>
		<li class="icon02">美人鱼</li>
		<li class="icon03">美人鱼</li>
		<li class="icon04">美人鱼</li>
		<li class="icon05">美人鱼</li>
	</ul>

</body>
</html>

网页背景固定

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
		body{
			background:url(images/0022.jpg) fixed;
			/* background-attachment:fixed; */
		}

		p{
			text-align:center;
			color:red;
		}


	</style>
</head>
<body>
	<p>网页文字</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>网页文字</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>网页文字</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>网页文字</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>网页文字</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>网页文字</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>网页文字</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>网页文字</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>网页文字</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>网页文字</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>网页文字</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>网页文字</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>网页文字</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
</body>
</html>

布局实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>练习</title>
	<style type="text/css">
		
		.pagenation{
			list-style:none;
			margin:50px auto 0;
			padding:0;
			width:600px;
			height:40px;
			border:1px solid #666;
			font-size:0;
			text-align:center;
		}

		.pagenation li{
			display:inline-block;
			height:26px;
			
			font-size:12px;
			margin:7px 5px 0;

		}

		.pagenation li a{
			display:block;
			background-color:gold;
			height:26px;
			line-height:26px;
			padding:0 10px;
			font:normal 12px/26px 'Microsoft Yahei';
			color:#000;
			text-decoration:none;
		}

		.pagenation li a:hover{
			background-color:red;
			color:#fff;
		}


		.menu{
			list-style:none;
			margin:50px auto 0;
			padding:0;
			width:958px;
			height:40px;
			border:1px solid #666;
			text-align:center;
			font-size:0;
		}

		.menu li{
			display:inline-block;
			font-size:14px;
			height:40px;
		}

		.menu li a{
			display:block;
			height:40px;			
			font:normal 14px/40px 'Microsoft Yahei';
			text-decoration:none;
			color:#000;
		}

		.menu li a:hover{
			color:#ff8800;
		}

		.menu li span{
			display:block;
			height:40px;
			font:normal 14px/40px 'Microsoft Yahei';
			margin:0 20px;
		}


		.menu02{
			list-style:none;
			margin:50px auto 0;
			padding:0;
			width:960px;
			height:40px;
			background-color:#55a8ea;
			position:relative;

		}

		.menu02 li{
			width:100px;
			height:40px;
			float:left;
		}

		.menu02 li a{
			display:block;
			width:100px;
			height:40px;
			line-height:40px;
			text-align:center;
			font-size:14px;
			font-family:'Microsoft Yahei';
			color:#fff;
			text-decoration:none;
		}

		.menu02 li a:hover{
			background-color:#00619f;
		}

		.menu02 .new{
			width:33px;
			height:20px;
			background:url(images/new.png) no-repeat;
			position:absolute;
			left:432px;
			top:-10px;
		}



	</style>
</head>
<body>
	<!-- ul.pagenation>(li>a{$})*11 -->

	<ul class="pagenation">
		<li><a href="#">上一页</a></li>
		<li><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
		<li><span>…</span></li>
		<li><a href="#">17</a></li>
		<li><a href="#">18</a></li>
		<li><a href="#">19</a></li>
		<li><a href="#">20</a></li>
		<li><a href="#">下一页</a></li>
	</ul>


	<!-- ul.menu>(li>a{网站建设})*7 -->

	<ul class="menu">
		<li><a href="#">网站建设</a></li>
		<li><span>|</span></li>
		<li><a href="#">网站建设</a></li>
		<li><span>|</span></li>
		<li><a href="#">网站建设</a></li>
		<li><span>|</span></li>
		<li><a href="#">网站建设</a></li>
		<li><span>|</span></li>
		<li><a href="#">网站建设</a></li>
		<li><span>|</span></li>
		<li><a href="#">网站建设</a></li>
		<li><span>|</span></li>
		<li><a href="#">网站建设</a></li>
	</ul>


	<!-- ul.menu02>(li>a{公司简介})*7 -->

	<ul class="menu02">
		<li><a href="#">公司简介</a></li>
		<li><a href="#">公司简介</a></li>
		<li><a href="#">公司简介</a></li>
		<li><a href="#">公司简介</a></li>
		<li><a href="#">公司简介</a></li>
		<li><a href="#">公司简介</a></li>
		<li><a href="#">公司简介</a></li>
		<li class="new"></li>
	</ul>

</body>
</html>

常用图片格式

图片是网页制作中很重要的素材，图片有不同的格式，每种格式都有自己的特性，了解这些特效，可以方便我们在制作网页时选取适合的图片格式，图片格式及特性如下：

1、psd
photoshop的专用格式。
优点：完整保存图像的信息，包括未压缩的图像数据、图层、透明等信息，方便图像的编辑。
缺点：应用范围窄，图片容量相对比较大。

2、jpg
网页制作及日常使用最普遍的图像格式。
优点：图像压缩效率高，图像容量相对最小。
缺点：有损压缩，图像会丢失数据而失真，不支持透明背景，不能制作成动画。

3、gif
制作网页小动画的常用图像格式。
优点：无损压缩，图像容量小、可以制作成动画、支持透明背景。
缺点：图像色彩范围最多只有256色，不能保存色彩丰富的图像，不支持半透明，透明图像边缘有锯齿。

4、png
网页制作及日常使用比较普遍的图像格式。
优点：无损压缩，图像容量小、支持透明背景和半透明色彩、透明图像的边缘光滑。
缺点：不能制作成动画

5、webp
将要取代jpg的图像格式。
优点：同jpg格式，容量相对比jpg还要小。
缺点：同jpg格式，目前不支持所有的浏览器。

位图和矢量图
位图也叫点阵图，是由一个个的方形的像素点排列在一起拼接而成的，位图在放大时，图像会失真。上面讲的5种图像都属于位图。
矢量图和位图组成图像的原理不同，它的图像轮廓是由函数曲线生成的，当放大图像时，实际的原理就是将曲线乘以一个倍数，图像可以轻易地放大，而且不会出现像素块，图像边缘也不会出现锯齿。

svg
目前首选的网页矢量图格式。
优点：图像容量小、图像放大不失真、支持透明背景和半透明色彩、图像边缘光滑。
缺点：色彩不够丰富。

flash
退出历史的重量级网页矢量图格式。
优点：图像容量小、图像放大不失真、支持透明背景和半透明色彩、图像边缘光滑、还可以制作动画、可编写交互。
缺点：不支持搜索引擎、运行慢、浏览器需要装插件才可支持。

总结
在网页制作中，如何选择合适的图片格式呢？
1、使用大幅面图片时，如果要使用不透明背景的图片，就使用jpg图片；如果要使用透明或者半透明背景的图片，就使用png图片；
2、使用小幅面图片或者图标图片时，如果图片含多种颜色，可以使用gif或png图片；如果图片是单色，而且要求有很好的显示效果，可以使用svg；如果是图片时动画的，可以使用gif。

【Web前端实操16】雪碧图（CSS精灵图）
qq_45498824的博客
01-28 1297
CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去。实现效果没有做很长，依次类推，可以慢慢根据距离做出雪碧图，如有不解，可以在评论区评论，共同进步。雪碧图一般会给一个完整的图片，主要利用。属性设置背景图像的起始位置。
前端面试八股文（超详细）
热门推荐
m0_50861631的博客
03-06 16万+
JavaScript \1. Promise 的理解 Promise 是一种为了避免回调地狱的异步解决方案 2. Promise 是一种状态机： pending（进行中）、fulfilled（已成功）和rejected（已失败） 只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。 回调地狱 回调函数中嵌套回调函数的情况就叫做回调地狱。 回调地狱就是为是实现代码顺序执行而出现的一种操作，它会造成我们的代码可读性非常差，后期不好维护。 一、Promise是什么？ Promise是最早
Web前端之背景、雪碧图
花&败
10-29 1074
repeatrepeat-xrepeat-yno-repeattopleftrightbottomcentercenterborder-boxborder-boxautocovercontainscrollfixed可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置并且该样式没有顺序要求，也没有哪个属性是必须写的orginclip。
CSS雪碧图
最新发布
m0_73879549的博客
07-19 148
雪碧图是一种前端优化技术，将多个小图标合并成一张大图，通过CSS的background-position属性控制显示特定部分。这种技术能有效减少HTTP请求次数，提升页面加载性能。示例展示了如何为导航图标、功能按钮等元素使用雪碧图，通过为块元素设置宽高并调整背景位置来实现。使用时需注意添加background-repeat:no-repeat属性，避免图片重复显示。开发时可通过浏览器工具调试位置参数，使效果更精准。
Web优化之雪碧图—动态生成雪碧图 读凡客产品页所想
weixin_34362875的博客
07-07 148
最近访问凡客诚品产品页留意了一下，这个页面的一些图动态做成了雪碧图，如： 从这张图片我们可以看到.SpriteWashings这个样式的背景图是通过joinimages.ashx动态生成，这个想法很好，但是没有生成样式。所以它的html使用了style="background-position: 0px -80px"这个来定位，个人认为这种方式不好，应该通过添加class 来定位，这就需要生...
web前端-CSS-雪碧图
jinchenpeng的博客
06-03 235
小问题1：下载那个工具下载了好久。。然后添加图片发现添加不了，原因是我的图片格式是gif，手动改成了png格式就可以了。 下了很多类似软件，还是这个最好用 根据下边的代码来定位就好 ...
【前端每日基础】day17——雪碧图
modaoshi51991的博客
05-19 1056
雪碧图（Sprite）是一种在Web开发中常用的图像合并技术，将多个小图标或图片合并成一张大图，然后通过CSS来显示其不同部分。创建了雪碧图后，可以通过CSS来显示其不同部分。减少HTTP请求：合并多个小图片成一张大图，可以显著减少浏览器对服务器的请求次数，从而提升页面加载速度。缓存效率：由于合并后的大图通常不会频繁变化，浏览器可以缓存这张图，从而进一步减少加载时间。性能优化：通过减少请求和提升缓存效率，整体页面性能可以得到提升。Gulp/ Grunt：自动化构建工具，可以通过插件生成雪碧图。
最全面、最详细web前端面试题及答案总结
HanXiaoXi_yeal的博客
02-01 3万+
2021最全面、最详细web前端面试题及答案总结 总结不易，希望可以帮助到即将面试或还在学习中的web前端小伙伴，祝面试顺利，拿高薪！ 本章是HTML考点的⾮重难点，因此我们采⽤简略回答的⽅式进⾏撰写，所以不会有太多详细的解释。我们约定，每个问题后我们标记『✨ 』的为⾼频⾯试题 doctype的作⽤是什么？✨ DOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个 ⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript
Web前端面试题整合，持续更新【可以收藏】
jason的java世界
12-12 1734
css相关、JS相关、浏览器网络相关、vue相关、react相关、移动端相关、插件及工具相关、前端性能优化、原生通信、算法相关、node相关、计算机基础
Vue.js图片滚动响应式布局：跨设备兼容性的终极解决方案
![Vue.js图片滚动响应式布局：跨设备兼容性的终极解决方案]...随着前端技术的发展和多设备浏览需求的增加，Vue.js框架在实现图片滚动响应式布局方面展现出了强大的灵活性和高效性。本文首先介绍了响应式布
104道 CSS 面试题
无心玩编程的博客
11-13 1550
104道 CSS 面试题 （给前端大全加星标，提升前端技能） 作者：CavsZhouyou https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Css/Css.md 本部分主要是笔者在复习 CSS 相关知识和一些相关面试题时所做的笔记，如果出现错误，希望大家指出！ 目录 1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？[1] 2.CSS 选择符有哪些？[2] 3.::before
CssSprite（雪碧图制作工具）
11-02
前端开发工具，处理图片所用的工具，前端开发必备工具
前端插件：雪碧图(多图压缩为一张)
weixin_41350225的博客
04-01 3832
CSS Sprites CSS Sprites又称CSS精灵 （谐音为css雪碧），是一种网页图片应用处理方式 CSS Sprites目的 将一个页面内所需要显示的图片全部整合到一张大图中，并使用css属性background-position进行调用 这样的话，当页面渲染时，可以减少请求次数，在一定程度上能够加快网页加载速度 通过gulp生成使用雪碧图（css精灵） ①先自动生成package....
前端学习笔记69-雪碧图
weixin_45034895的博客
05-07 294
前端学习笔记69-雪碧图 前面提到会有闪烁问题，为了解决这个问题，可以把三种图片拼接成一张，就可以搞定。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev
雪碧图布局
weixin_30563917的博客
11-03 146
最近公司项目需要增加一个需求，需要给组件设置动画类型，而每种动画类型都需要一个对应的动画图标，这里就使用了雪碧图。 一、什么是雪碧图 百度百科：CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。 举个栗子：淘宝首页 上图中的图标，实际就是如下一张背景图 ...
Web基础——雪碧图
weixin_43311121的博客
01-30 531
雪碧图的制作与使用 1、雪碧图：多个图片集成在一个图片中的图 2、为何使用：可以减少网络请求的次数，加快运行的速度。 3、制作网站：CSS Sprites Generator 4、如何使用： 以下图为例： 示例代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti...
前端学习（133）：雪碧图实现原理
歌谣的博客
12-17 717
百度词条对雪碧图的解释是：CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。 举个应用的实例：这是淘宝网的分类导航实例，每个目录的前面都会有一个图标，实现这个图标的方法有两种，一种是直接使用image标签，对每个需要图标的地方都设置一个image标签，这种方法的缺点是需...
【前端小实战】百度新闻雪碧图及动画（CSS sprites）
qq_53569667的博客
01-13 2368
模仿百度新闻右侧电梯雪碧图效果，实现了雪碧图的应用。
前端进阶html+css02----精灵图的使用（雪碧图）
weixin_43795761的博客
02-13 638
精灵图（css sprites）也叫雪碧图，就是把许多图片制作成一图片。通过设置位置来显示你需要的图片。介绍一个获取精灵图位置的小工具。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值