【网页前端】CSS样式表进阶之图像的灵活使用与拓展知识

👀专栏介绍

【前端网页】 目前主要更新HTML，一起学习一起进步。

👀本期介绍

本期主要介绍CSS样式表进阶之图像的灵活使用与拓展知识

文章目录

1. 图像的灵活使用（拓展）

1.1 引言

1.2 精灵图

1.2.1 概念

1.2.2 步骤解析

1.2.3 总结

1.3 字体图标

1.3.1 引言&概念

1.3.2 项目准备

1.3.3 环境搭建

1.3.4 使用方式

1.3.5 总结

2. 拓展知识

2.1 文字阴影

2.2 元素变成圆形

2.3 截图整个网站

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、截图后，弹出窗口，提示网页截图保存位置