当前位置： 移动技术网 > IT编程>网页制作>HTML > 37、雪碧图

37、雪碧图

2020年07月22日  | 移动技术网IT编程  | 我要评论

文章目录

介绍

本文是在学习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>

本文地址：https://blog.csdn.net/MoonNight608/article/details/107483453

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网