About css sprites
2016-05-24 17:18
537 查看
转载自https://davidwalsh.name/css-sprites
The idea of CSS sprites is pretty genius. For those of you who don't know the idea of a sprite, a sprite is basically multiple graphics compiled into one image. The advantages of using sprites are:
Fewer images for the browser to download, which means fewer requests to the server.
Total images size is generally smaller, so less download time for the user and less bandwidth consumption.
No ugly mouseover code. No JavaScript -- only CSS!
For this example, I've used the DW illustration. I have a color version and a grayscale version which I have merged into one file as you can see below.
![](https://davidwalsh.name/demo/sprites/dw-logo-sprite.jpg)
Now, it's time to see how the system works.
View
Demo
Just a very simple anchor tag with a unique ID.
When the image initially loads, I want the grayscale version, which is on the right site. For this reason, I set the link's initial background position 191 pixels to the left. When someone mouseovers the link, however, I want to show the color version. It's
only then that I remove the 191 pixels.
Wanna see the working version?
View
Demo
The idea of CSS sprites is pretty genius. For those of you who don't know the idea of a sprite, a sprite is basically multiple graphics compiled into one image. The advantages of using sprites are:
Fewer images for the browser to download, which means fewer requests to the server.
Total images size is generally smaller, so less download time for the user and less bandwidth consumption.
No ugly mouseover code. No JavaScript -- only CSS!
For this example, I've used the DW illustration. I have a color version and a grayscale version which I have merged into one file as you can see below.
![](https://davidwalsh.name/demo/sprites/dw-logo-sprite.jpg)
Now, it's time to see how the system works.
View
Demo
The HTML
<a href="http://domain.com" id="logo-link"> </a>
Just a very simple anchor tag with a unique ID.
The CSS
#logo-link { width:191px; height:151px; text-decoration:none; display:block; background-image:url(dw-logo-sprite.jpg); background-position:191px 0; } #logo-link:hover,#logo-link:active { background-position:0 0; }
When the image initially loads, I want the grayscale version, which is on the right site. For this reason, I set the link's initial background position 191 pixels to the left. When someone mouseovers the link, however, I want to show the color version. It's
only then that I remove the 191 pixels.
Wanna see the working version?
View
Demo
相关文章推荐
- css属性继承和优先级
- CSS固定宽度布局
- css垂直水平居中小技巧
- XPath和CSS 3的解析器比较
- HTML+CSS基础(六):CSS样式与属性
- css中网页图片下方多出几像素问题分析
- 挂多个css还是新建class-多用组合,少用继承
- Webkit CSS实现
- css浮动
- css实现正方形div的3种方式
- 网页元素CSS居中实现完整攻略
- css reset
- css定位
- Emmet for Dreamweaver:HTML/CSS代码快速编写神器
- CSS3颜色渐变模式
- white-space pre-wrap 样式 与 pre 标签 等价
- CSS设置超出指定宽度自动换行
- 样式主题与自定义View 浅谈
- listView 上拉加载更多 和 加载样式的自定义
- 样式命名规范