HTML、CSS中雪碧图的使用

雪碧图：多个图片集成在一个图片中的图

使用雪碧图可以减少网络请求的次数，加快运行的速度。

例如要使用下面的雪碧图：需要用到background-position属性

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>#container div{  /* 空格 后代选择器：选中下面的所有的div*/height: 25px;width: 25px;color: red;background-image: url("../../img/ico1.gif");}#div2{background-position: -42px 0;/*图片往左移动42个px*/}#div3{background-position: -165px -28px;/*图片往左移动165个px   图片向上移动28个px*/}</style><title>雪碧图</title>
</head>
<body><div id="container"><div></div><div id="div2"></div><div id="div3"></div>
</div></body>
</html>

代码运行结果：

HTML、CSS中雪碧图的使用相关推荐

CSS中雪碧图CSS-Sprite的使用，解决图片闪烁问题
背景图片是以外部资源的形式加载进网页的,浏览器每加载一个外部资源就需要单独的发送一次请求,但是我们外部资源并不是同时加载,浏览器会在资源被使用才去加载资源分别引入会导致的问题: (1)切换图片时,会 ...
css中雪碧图(sprite)的使用及制作方法
雪碧图(sprite)是减少请求次数的有效手段,其原理是把多张图片进行合成,使用时通过css进行定位. 1.先看一下雪碧图没有使用雪碧图时图标是这样一个个的单独文件: 合成雪碧图后是这样拼在一起的一 ...
html雪碧图效果,html和css中雪碧图的使用
雪碧图:多个图片集成在一个图片中的图使用雪碧图可以减少网络请求的次数,加快运行的速度. 例如要使用下面的雪碧图:需要用到background-position属性代码示例: #container ...
在html中雪碧图的坐标怎么看,详解CSS Sprite雪碧图的应用
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...
CSS雪碧图demo（含雪碧代码）
css雪碧图demo效果图,含hover,代码附件下载sprite_demo.zip 雪碧图制作问题参考: HTML 5开发的在线雪碧图片合成工具 http://developer.51cto.com ...
css雪碧图及优缺点
[前言] 做开发的小伙伴可能经常遇到雪碧图,那么究竟什么是雪碧图呢? [简介] 官方解释: CSS雪碧图即CSS Sprite(精灵),在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将 ...
三分钟学会如何使用css雪碧图（Sprite）
一. 先分析一下名字(有没有人跟我一开始一样疑惑为啥叫这名) Sprite 英文小精灵的意思,Sprite又叫小精灵图,恰好呢某绿瓶气泡水名也叫sprite,狠狠地撞名-_ ...
雪碧图PHP,Webpack中雪碧图插件使用详解
背景在开发过程中,我们需要用到很多图标,这些图标的大小不是很大,但是每次需要向服务器发送请求,从而加重服务器的负担,尤其是当网站处于高访问量的情况下或网络不稳定的时候,服务器性能会明显下降.这种情况 ...
CSS雪碧图制作emoji表情包
效果图: 原理:利用雪碧图,来实现emoji表情包,减少图片请求数. 表情包转换为文字 & 文字转换为表情包维护两个对象来实现. 缺点:表情包大小由雪碧图中表情包大小控制,不能更改. htm ...

HTML、CSS中雪碧图的使用

HTML、CSS中雪碧图的使用相关推荐

最新文章

热门文章