CSS笔记(16)

y191024

发布于 2022-09-20 19:32:21

77200

代码可运行

文章被收录于专栏：睡不着所以学编程睡不着所以学编程

运行总次数：0

代码可运行

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

精灵图

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

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

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

使用精灵图核心:

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

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

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

<!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>

做出来的效果: