提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

CSS笔记(16)

笔记CSS 16
2023-06-13 09:12:59 时间

CSS布局总算是告一段落啦,现在开始学习一些CSS的高级技巧,能坚持到这里真不容易.

精灵图

一个网页中往往会应用很多小的背景图片作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度.

因此,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称 CSS Sprites/Css雪碧)

核心原理: 将网页中的一些小背景图片整合到一张大图中,这样服务器只需要一次请求就可以了.

使用精灵图核心:

  1. 精灵技术主要针对于背景图片使用,就是把多个小背景图片整合到一张大图片中.
  2. 这个大图片也称为sprites精灵图 或者雪碧图.
  3. 移动背景图片位置,此时可以使用background-position.
  4. 移动的距离就是这个目标图片的x和y坐标.注意网页中的坐标有所不同,相当于第四象限.
  5. 因为一般情况下都是往上往左移动,所以数值是负值.
  6. 使用精灵图的时候需要精确测量,每个背景小图片的大小和位置.

其实就是放一个盒子,然后给盒子添加一个背景图片,移动背景图片的位置,让想要的图案出现在盒子里.

下面做一个案例,使用下面的字母图,用精灵图的方式将自己的名字拼出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>name</title>
    <style>
        .name {
            float: left;
            width: 117px;
            height: 129px;
            background: url(../images/abcd.jpg) no-repeat
            /* background-color: pink; */
        }
        .y {
            background-position:  -362px -540px;
        }
        .f {
            width: 95px;
            background-position: 0px -128px;
        }
        .t {
            width: 104px;
            background-position: -367px -405px
        }
</style>
</head>
<body>
    <div class="name y"></div>
    <div class="name f"></div>
    <div class="name t"></div>
</body>
</html>

做出来的效果:

字体图标

字体图标使用场景: 主要用于显示网页中通用,常用的一些小图标.

精灵图是由诸多优点的,但是缺点很明显:

1.图片文件还是比较大的.

2.图片本身放大和缩小会失真.

3.一旦图片制作完毕想要更换非常复杂.

此时,有一种技术的出现很好的解决了以上问题,就是字体图标iconfont.

字体图标可以为前端工程师提供一种方便高效的图标使用方式,显示的是图标,本质属于字体.

字体图标的优点:

  • 轻量级:一个图标字体要比一系列的图像要小,一旦字体加载了,图标就会马上渲染出来,减少了服务器请求.
  • 灵活性:本质其实是文字,可以随意的更改颜色,产生阴影,透明效果,旋转等.
  • 兼容性:几乎支持所有的浏览器,可以放心使用.

注意:字体图标不能替代精灵技术,只是对工作中图标部分技术的提升和优化.

总结:

  1. 如果遇到一些结构和样式比较简单的小图标,就用字体图标.
  1. 如果遇到一些结构和样式比较复杂的小图片,就用精灵图.

字体图标下载:

  • icomoon字库
  • 阿里icofont字库

如何使用字体图标:

这个比较麻烦,我一步一步讲解.

我使用的是icomoon网站,进去以后点击右上紫色的icomoon App.

点进来以后会有很多的图标可以选择

selection是我们已经选择好的字体图标,generate font就是生成字体图标.我们选好以后生成字体图标.

我们解压好以后将font文件放在我们html文件的根目录下,点开style,里面有引用的格式.

现在我们放一个span,里面插入我们想要的字体图标.

我们先打开demo文件:

里面有我下载好的图标.

复制想要的图标后面的小长方形,粘贴到span中.

现在再给span一个样式,字体是icomoon,从上面复制下来即可,现在我们的图标就变成了字体图标可以随意的放大缩小,改变颜色了.

阿里的icofont我还没搞清楚要怎么使用,一会研究一下

相关文章