CSS-Sprite（雪碧图）

最新推荐文章于 2024-04-11 00:00:00 发布

周巴帝

最新推荐文章于 2024-04-11 00:00:00 发布

阅读量734

点赞数 1

分类专栏： web 文章标签： css html css3

本文链接：https://blog.csdn.net/Hello_super/article/details/122609463

版权

web 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

CSS-Sprite （解决HTML图片闪烁问题）

1. 描述

图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载，浏览器加载外部资源时是按需加载，用则加载，不用则不会加载。如果我们使用所需要的图片刚好需要加载时，浏览器向会发送一个请求，这时背景图片就会出现一个短暂的空白，然后再将图片加载后，放在空白那里，如下列代码。

2. 案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮练习</title>
    <style>
        a{
            display: block;
            width: 93px;
            height: 29px;
        }
        a:link{
            background-image: url('../08/link.png');
        }
        a:hover{
            background-image: url('../08/hover.png');
        }
        a:active{
            background-image: url('../08/active.png');
        }
    </style>
</head>
<body>
    <a href="#"></a>
</body>
</html>

像上边的练习link会首先加载，而hover和active会在指定状态触发的时候才会加载，这时如果我们是第一次访问这个网页，当我们将鼠标移动到图片上去时，页面图片会出现一个短暂闪烁的问题，下面使用“雪碧图”来解决这个问题。

3. 解决

a:link{
  background-image: url('../08/btn.png');
}
a:hover{
    background-image: url('../08/btn.png');
    background-position: -93px 0px;
}
a:active{
    background-image: url('../08/btn.png');
    background-position: -186px 0px;
}

4. 总结

使用雪碧图可以解决图片闪烁的问题：可以将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示相应的图片。这样图片会同时加载到网页中，就可以有效的避免出现闪烁的问题，这个技术在网页中应用的十分广泛，被称为CSS-Sprite，这种图称为“雪碧图”。

雪碧图的使用步骤：
1. 先确定要使用的图标；
2. 测量图标的大小；
3. 根据测量的结果创建一个元素；
4. 将雪碧图设置为元素的背景图片；
5. 设置一个偏移量已显示要显示的图片；

雪碧图特点： 一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提示用户的体验。

周巴帝

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-Sprite（雪碧图）

CSS-Sprite （解决HTML图片闪烁问题）1. 描述图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载，浏览器加载外部资源时是按需加载，用则加载，不用则不会加载。如果我们使用所需要的图片刚好需要加载时，浏览器向会发送一个请求，这时背景图片就会出现一个短暂的空白，然后再将图片加载后，放在空白那里，如下列代码。2. 案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF
复制链接

扫一扫