CSS雪碧,即CSS Sprite 简单的例子

简介: CSS Sprite生成工具 http://pan.baidu.com/s/1gdGQwiJ 工具可将多幅图片整合一张,并生成CSS。 HTML代码 .img{background:url(img.

CSS Sprite生成工具

http://pan.baidu.com/s/1gdGQwiJ

工具可将多幅图片整合一张,并生成CSS。

HTML代码

<style>
        .img{background:url(img.png)  no-repeat;}
            .Lighthouse{height:768px;width:1024px;background-position:0 0;}
            .Koala{height:768px;width:1024px;background-position:0 -768px;}
            .Tulips{height:768px;width:1024px;background-position:0 -1536px;}
            .Penguins{height:768px;width:1024px;background-position:0 -2304px;}
            .Desert{height:768px;width:1024px;background-position:0 -3072px;}
            .Chrysanthemum{height:768px;width:1024px;background-position:0 -3840px;}
            .Jellyfish{height:768px;width:1024px;background-position:0 -4608px;}
            .Hydrangeas{height:768px;width:1024px;background-position:0 -5376px;}
</style>

<img  class="img Hydrangeas" />

优点

▪ 减少加载网页图片时对服务器的请求次数
▪ 提高页面的加载速度
▪ 减少鼠标滑过的一些bug

不足

▪ CSS雪碧的最大问题是内存使用
▪ 影响浏览器的缩放功能
▪ 拼图维护比较麻烦
▪ 使CSS的编写变得困难
▪ CSS 雪碧调用的图片不能被打印
▪ 错误得使用 Sprites 影响可访问性

相关文章
|
4月前
|
前端开发
css sprite 的优缺点,使用方法和示例
css sprite 的优缺点,使用方法和示例
29 1
|
4月前
|
Web App开发 前端开发 容器
一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite)
一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite)
|
前端开发
CSS Sprite 优点
CSS Sprite 优点自制脑图
56 0
CSS Sprite 优点
|
前端开发
CSS——CSS精灵技术(sprite)※
CSS——CSS精灵技术(sprite)※
201 0
CSS——CSS精灵技术(sprite)※
|
前端开发
css sprite雪碧图制作,使用以及相关,图文gif。
在网页制作中,雪碧图也是前端攻城狮必须掌握的一项小技能。百度词条对雪碧图的解释是:CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。本文主要内容包括雪碧图如何制作,雪碧图优缺点,哪些场景需要使用雪碧图。 实现原理: CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中,从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染,这也就意味着你的标签变得更加复杂了,图片是在CSS中定义.
278 0
css sprite雪碧图制作,使用以及相关,图文gif。
|
Web App开发 前端开发 .NET
一起谈.NET技术,在ASP.NET中自动合并小图片并使用CSS Sprite显示出来
  前几天MS的ASP.NET小组推出了一个小组件:Sprite and Image Optimization Framework,用于生成Sprite CSS,及将小的图片生成一副大图。   下载地址:http://aspnet.codeplex.com/releases/view/50140   8189E6B8-FBE4-4F01-8F9F-5687C0EA9F59   下载后工程中有一个类库,一个ASP.NET WebForm示例以及一个ASP.NET MVC示例。
1305 0
|
前端开发 算法
|
Web App开发 前端开发
|
前端开发
CSS Sprite雪碧图使用场景-慕课网
来源:http://www.imooc.com/video/1317#0-hi-1-36977-89fdc647f52c5196c0d5da60d38d89ea
1082 0
|
前端开发 .NET 开发框架
在ASP.NET中自动合并小图片并使用CSS Sprite显示出来
前几天MS的ASP.NET小组推出了一个小组件:Sprite and Image Optimization Framework,用于生成Sprite CSS,及将小的图片生成一副大图。 下载地址:http://aspnet.codeplex.com/releases/view/50140 8189E6B8-FBE4-4F01-8F9F-5687C0EA9F59 下载后工程中有一个类库,一个ASP.NET WebForm示例以及一个ASP.NET MVC示例。
1096 0