Css精灵图技术

最新推荐文章于 2024-08-21 12:30:00 发布

原创最新推荐文章于 2024-08-21 12:30:00 发布 · 646 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

8 篇文章

订阅专栏

前言:
精灵图是前端重点应用场景之一,几乎所有大型网站都会用到的技术,这也就要求了前端程序员需要会的技术。

一、网页加载图片的原理

当我们打开一个网页时,这时浏览器就会发送http请求,服务器收到通知,就会渲染到界面,网站内容越多,耗费的时间也就越长。

二、精灵图技术的诞生

当我们打开一个大型商城网站时,肯定会有大量的图片,这些图片都是一张一张的从服务器传送过来的,每个网站都有一些小图标,这些图标可以合并成一张图片,这样就可以减少服务器的请求次数,从来更快的加载网站。
介绍一张京东精灵图:
在这里插入图片描述

三、精灵图技术工作原理

我们创建一个html文件,里面创建一个div，利用背景属性(background-img)将精灵图添加进去,通过调整背景图片的位置(background-position),从而展现出不同的图标。

四、精灵图技术的使用

案例

案例需求:
将京东精灵图中的小飞机图标,在网页中显示出来

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 25px;
            height: 23px;
            margin: 100px auto;
            /* 背景图片精灵图存放地址 */
            background-image: url(../img/icons.png);
            /* 图片不平铺 */
            background-repeat: no-repeat;
            /* 改变背景图片在div中的位置 */
            background-position: -80px -18px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

实现效果
在这里插入图片描述