CSS 雪碧图
2023-09-11 14:20:09 时间
作用
图片属于网页中的外部资源,外部资源都需要浏览器单独发送请求加载,
雪碧图的使用步骤:
1.先确定要使用的图标
2.测量图标的大小
3.根据测量结果创建一个元素
4.将雪碧图设置为元素的背景图片
5.设置一个偏移量以显示正确的图片
雪碧图的特点:
一次性将多个图片加载进页面,降低请求的次数,加快访问速度,提升用户的体验
雪碧图;
![](https://img2020.cnblogs.com/blog/1608043/202004/1608043-20200410215527030-477894287.png)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 8 /* 默认第一个切图 */ 9 div{ 10 width: 41px; 11 height: 69px; 12 /* background-color: #bfa; */ 13 background-image: url(雪碧图按钮/icon-slides.png); 14 background-position: 0 0; 15 float: left; 16 margin-left: 50px; 17 } 18 /* 第二个切图 */ 19 .b{ 20 background-position: -41px 0; 21 } 22 23 /* 第三个切图 */ 24 .c{ 25 background-position: -83px 0; 26 } 27 /* 第四个切图*/ 28 .d{ 29 background-position: -124px 0; 30 } 31 32 </style> 33 </head> 34 <body> 35 <div class="a"></div> 36 <div class="b"></div> 37 <div class="c"></div> 38 <div class="d"></div> 39 40 </body> 41 </html>
效果
在线的雪碧图CSS代码生成
http://tools.jb51.net/code/css_sprite
http://alloyteam.github.io/gopng/
相关文章
- 【基础】在CSS中绘制三角形及相关应用
- 纯CSS实现柱形图
- css实现一级下拉菜单
- css公共样式
- [CSS 3] Apply Aspect Ratio Sizing to Images with CSS object-fit
- CSS布局方案之圣杯布局
- 前端学习 -- Css -- 盒子模式
- 使用CSS样式表格式化XML文档
- CSS 基础点集锦一:盒子模型、浮动、清除浮动
- HTML+CSS登陆界面实例:Instagram 登录页面(一个拿来就能用的炫酷登录页面)
- 【CSS】CSS 背景设置 ⑨ ( 背景半透明设置 )
- css一个图片包含多个图片|网站侧栏导航
- 【CSS】css概述、语法规范、基础选择器_01
- CSS(二)