【网页前端】CSS样式表进阶之图像的灵活使用与拓展知识
🔎这里是【前端网页】，关注我学习前端不迷路
👍如果对你有帮助，给博主一个免费的点赞以示鼓励
欢迎各位🔎点赞👍评论收藏⭐️
👀专栏介绍
【前端网页】 目前主要更新HTML，一起学习一起进步。
👀本期介绍
本期主要介绍CSS样式表进阶之图像的灵活使用与拓展知识
文章目录
1. 图像的灵活使用（拓展）
1.1 引言
网页上我们经常能够看到大量图标图片使用
若每张图片都单独进行一次传输，效率会很低。
好比：我们去超市买水果，若买一个带回家一个，那么效率很低，不如买完一次性打包带回家更方便。
这个网页数据传输道理相同，所以我们的选择是将当前页面所需要的图标图片一次性打包传输，方
便使用。
所以，为了提高页面加载效率，这里我们就需要学习
CSS
的精灵图和字体图标。
1.2 精灵图
1.2.1 概念
精灵图，又名雪碧图，是多个小图标的集合图。
我们通过背景图片的设置，就可以使用精灵图。
1.2.2 步骤解析
1
、在精灵图上，找到要使用的图片，测量其宽高
2、以 div 为例，为其设置和图片相同的宽高（加边框仅为了方便演示）
3、通过背景图片引入，不能重复
4、因为现在显示的背景图默认为左上角，我们要通过 background-position 来调节。
5、从图片左上角 测量 距离目标图像左上角的距离（注意，不要覆盖了目标图像）
6
、通过测量得知，目标图像左上角坐标：
x=275,y=200
设置时，全部更改为负数即可实现
1.2.3 总结
精灵图通过背景图片、背景位置结合使用，可以提高页面加载的效率，在后期页面美化中使用较为
频繁。
1.3 字体图标
1.3.1 引言&概念
精灵图虽然可以提高页面加载效率，但是精灵图同样也存在问题：
1
、 图片放大失真
2
、 图片过大，加载速度过慢，导致网页在加载初期看不到任何图像
3
、 如果想为精灵图添加或者减少图标，要对整体修改，加大了精灵图修改难度
所以，为了弥补精灵图的不足之处，我们还需要学习字体图标，来和精灵图结合使用。
字体图标：引入第三方特殊字体，以特殊字体显示为图片图标。
注：因为在计算机中，字体的本质就是图片，所以又称为图标字体。
优点：
1
、轻量级：字体加载速度极快。
2
、灵活：可以为字体加入颜色、大小、阴影等字体样式
3
、兼容性：支持几乎所有浏览器
4
、效率高：减少了数据传输次数
1.3.2 项目准备
可以使用老师提供的资源，也可以进行如下自由下载
1
、登陆 阿里字体图标库，搜索你需要的字体：
http://www.iconfont.cn
2
、例如搜索：“Java
”
3、把需要的图标添加到购物车中
4、选择过各种图标后，点击购物车
5、点击“下载代码”
6、下载完毕，所有代码都在 download.zip 中
1.3.3 环境搭建
1
、解压压缩文件，打开解压的文件夹（文件夹名每次下载略有不同）
2、将需要的字体图标存入 idea 对应位置
课外扩展：TureType( .ttf ) 格式 .ttf 字体是 Windows 和 Mac 的最常见的字体，支持这种字体的浏览器有IE9+ 、 Firefox3.5+ 、Chrome4+ 、 Safari3+ 、 Opera10+ 、 iOS Mobile 、 Safari4.2+;Web Open Font Format( .woff ) 格式 woff 字体，支持这种字体的浏览器有 IE9+ 、Firefox3.5+ 、 Chrome6+ 、Safari3.6+ 、 Opera11.1+;Embedded Open Type( .eot ) 格式 .eot 字体是 IE 专用字体，支持这种字体的浏览器有 IE4+;SVG( .svg ) 格式 .svg 字体是基于 SVG 字体渲染的一种格式，支持这种字体的浏览器有Chrome4+ 、 Safari3.1+ 、Opera10.0+ 、 iOS Mobille safari3.2+
1.3.4 使用方式
1
、打开
demo_index.html
2、选择 Unicode 或 Symbol 方式中的一种
3、以 Unicode 为例，根据网页提示，找到使用的关键代码
4、idea 中，html 引入 CSS 样式，并复制关键代码
5、查询图标对应的 Unicode 码，修改 span 中的转义字符值。
6
、通过为
iconfont
设置字体大小，改变图标大小（因为字体图标属于字体，但
font-family
不要使
用，无效果）
1.3.5 总结
字体图标可以解决精灵图修改难、图片大的问题，通常和精灵图结合使用，解决网页图标问题。
精灵图：负责页面通用的各种大中型彩色图标图片
字体图标：负责页面快速显示的各种小型图标图片
2. 拓展知识
2.1 文字阴影
字体图标允许我们为文本添加阴影。
格式： text-shadow ： X 轴偏移 Y 轴偏移 模糊程度 阴影颜色 ;
text-shadow: 5px 5px 5px #FF0000;
2.2 元素变成圆形
元素可以在表现形式上通过
CSS
样式调节，变为圆形：
格式：
border-radius
:百分比;
注意：
1
、
0%
是四边形，
50%
是圆形。
0%~50%
之间是圆角四边形
2
、占用的标准流位置仍为四边形
示例代码：
2.3 截图整个网站
1
、先把滚动条拉倒网页最底部
2
、页面上，鼠标右键，“检查”
3
、
ctrl+shift+P
呼出输入框
4、输入：capture full size screenshot ，敲回车
5、截图后，弹出窗口，提示网页截图保存位置
浙公网安备 33010602011771号