37、雪碧图

最新推荐文章于 2021-07-13 22:04:09 发布

五仁卤鸡翅

最新推荐文章于 2021-07-13 22:04:09 发布

阅读量128

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/MoonNight608/article/details/107483453

版权

css 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

文章目录

介绍
雪碧图

介绍

本文是在学习CSS时做的学习笔记，所有笔记内容为 CSS学习笔记

雪碧图

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
1、解决图片闪烁问题
    - 将多个小图片保存到一个大图片中，通过调整background-position来
     显示图片的位置，这样图片同时加载到网页中，可以有效的避免切换图片时闪烁的问题
    
2、雪碧图步骤
   1、确定使用的图标
   2、测量图标大小
   3、根据测量结果创建一个元素
   4、将雪碧图设置为元素背景图片 
   5、设置 background-position  来显示图片  
3、雪碧图特点
    一次性加载多个图片，加快访问速度        

</style>
<body>
<div class="box1">
   今天天气不错 hello hello 
</div>

</body>
</html>