HTML5、CSS雪碧图

所谓的雪碧图就是在一整张图片中分割出自己想要的部分，也可理解为图片截取（坐标的移动）

利用background-position属性，改变图片的位置（想要的图片的移动位置）

图片截取都是从左上角的（0,0）坐标开始，所有需要把所需的图片移动想左、上移动，移动到所截取的图片的位置即可

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>/*空格  ：后代选择器（所有后代）*/
        #container div{width: 25px;height: 25px;color: red;background-image: url("../../img/icon.gif");background-repeat: no-repeat;}#div2{background-position:-42px 0;}#div3{background-position: -165px -25px;}#div4{background-position: 0 -169px;}#div5{background-position: -23px -288px;}

    </style><title>雪碧图</title>
</head>
<body><div id="container"><div></div><div id="div2"></div><div id="div3"></div><div id="div4"></div><div id="div5"></div>
</div></body>
</html>

HTML5、CSS雪碧图相关推荐

CSS雪碧图demo（含雪碧代码）
css雪碧图demo效果图,含hover,代码附件下载sprite_demo.zip 雪碧图制作问题参考: HTML 5开发的在线雪碧图片合成工具 http://developer.51cto.com ...
css雪碧图及优缺点
[前言] 做开发的小伙伴可能经常遇到雪碧图,那么究竟什么是雪碧图呢? [简介] 官方解释: CSS雪碧图即CSS Sprite(精灵),在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将 ...
css雪碧图动画,CSS3动画——雪碧图的实现
前言作为一个前端的初学者,现在好像已经在nodejs上越跑越偏,之前一直崇拜的CSS3和HTML5动画,如今也好久没有管.因为之前学了好多知识点,但是没有系统的进行总结,就从这篇文章开始,对一些碎片 ...
CSS雪碧图制作emoji表情包
效果图: 原理:利用雪碧图,来实现emoji表情包,减少图片请求数. 表情包转换为文字 & 文字转换为表情包维护两个对象来实现. 缺点:表情包大小由雪碧图中表情包大小控制,不能更改. htm ...
css雪碧图如何调整大小
1.通过transform: scale(0.5);来缩放,但在本身有过渡或动画时,刷新页面会有卡顿拉伸现象!不建议这样做! 2.直接调整雪碧图background-size大小例如,雪碧图规格14 ...
html css雪碧图,css常见小技巧（雪碧图）
1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 CSS雪碧即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用 ...
html css雪碧图,css sprite css雪碧图生成工具
什么是css sprite CSS sprite在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就 ...
css 雪碧图计算方式,前端必备 CSS Sprites雪碧图生成工具
[摘要] CSS Sprites又称css精灵或者谐音css雪碧,是一种网页图片应用处理方式,今天为大家分享一个一键生成css雪碧图片的工具,复杂的事情简单化,提高开发效率. CSS Sprites又 ...
CSS 雪碧图及其优缺点
CSS Sprites简介:国内叫雪碧图或者雪碧精灵.它允许将网页中多个零星小图都包含到一张大图中去,减少每个图的 HTTP 请求来提高图片加载效率,通过 background-image.backg ...
三分钟学会如何使用css雪碧图（Sprite）
一. 先分析一下名字(有没有人跟我一开始一样疑惑为啥叫这名) Sprite 英文小精灵的意思,Sprite又叫小精灵图,恰好呢某绿瓶气泡水名也叫sprite,狠狠地撞名-_ ...

HTML5、CSS雪碧图

HTML5、CSS雪碧图相关推荐

最新文章

热门文章