css sprites demo

CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.

使用css sprites是减少图片资源请求次数的首选方法。将一些背景图片组合到一张图片中，并在css文件中使用background-image和background-position属性展示需要的图片部分。

以上是雅虎web性能优化最佳实践中的Minimize HTTP Requests(减少http请求次数)中的一个策略，使用css sprites。

并不是所有的图片都需要组合到一起，需要组合的图片：ico、图标等小型图片。大型的图不需要应用css sprites。

实现方式

1.首先把需要的图标利用ps等工具合成到一张图片中，例如

2.编写css样式

在编写展示图片的时候要注意两点：

图片的定位
图片容器的宽和高

由于css sprites主要的应用是展示图标等小型图片，通常需要与其他元素展示在一行中，所以在编写css代码时有一个很方便的技巧是将容器的display属性设置为inline-block，既可以方便的设置容器的宽和高又可以与其他需要的元素共处一行，例如：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>home</title><style>.ico {height: 16px;width: 16px;display: inline-block;background-image: url("images/ico.png");}.ico-alert {background-position: 0 0;}.ico-word {background-position: -24px 0;}.ico-excel {background-position: -48px 0;}.ico-ppt {background-position: -72px 0;}.ico-pdf {background-position: -96px 0;}.ico-txt {background-position: -120px 0;}a {display: inline-block;width: 35px;text-align: center;margin: 5px;text-decoration: none;}</style>
</head>
<body><div><span class="ico ico-alert"></span><a href="#">alert</a><span class="ico ico-word"></span><a href="#">word</a> <br><span class="ico ico-excel"></span><a href="#">excel</a><span class="ico ico-ppt"></span><a href="#">ppt</a> <br><span class="ico ico-pdf"></span><a href="#">pdf</a><span class="ico ico-txt"></span><a href="#">txt</a></div>
</body>
</html>

效果如下

其核心代码为

/* 设置容器的高度,宽度和图片 */
.ico {height: 16px;width: 16px;display: inline-block;background-image: url("images/ico.png");
}
/* 定位显示的背景 */
.ico-alert {background-position: 0 0;
}

background-position 有三种定位方式

关键词定位top, right, bottom, left, center选择其中的两个作为其参数，若只有一个参数则认为第二个为center
百分比定位
像素定位

百分比定位和像素定位可以混用

百分比定位和像素定位：其参数可正可负。当为正数时，代表背景图片作为对象盒子背景图片时靠左和靠上多少距离多少开始显示背景图片；当为负数时代表背景图片作为盒子对象背景图片，将背景图片拖动超出盒子对象左边多远，拖动超出盒子对象上边多远开始显示此背景图片。一般都会使用负数，比较符合人的使用习惯

css sprites demo相关推荐

使用CSS sprites减少HTTP请求
sprites是鬼怪,小妖精,调皮鬼的意思,初听这个高端洋气的名字我被震慑住了,一步步掀开其面纱后发觉很简单的东西,作用却很大神马是CSS 小妖精 CSS sprites是指把网页中很多小图片(很多 ...
html css精灵,谈谈CSS Sprites(css精灵)
CSS Sprites在国内很多人叫css精灵,其实这个技术不新鲜,这个技术老到什么程度呢,我不敢确定,但是我看到最早的关于CSS Sprites是在Dave Shea的<CSS Sprites ...
“约见”面试官系列之常见面试题之第五十一篇之CSS Sprites（建议收藏）
CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢 ...
CSS Sprites原理
CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢 ...
css怎么随着鼠标移动,利用CSS sprites制作随着鼠标移动的动画背景
网页设计中的背景图是至关重要的,在之前的文章<网页设计中的背景创意和发展趋势>也有为大家分享过网页设计中关于背景的设计以及发展趋势,一个优秀的背景图可以为你的网站增添不少的精彩.在浩大的互 ...
android 精灵图的使用方法,css sprites（精灵图）如何使用？
CSS Sprites是一种性能优化技术,一种网页图片应用处理方式:将多个图像组合成单个图像文件以在网站上使用的方法,以提高性能:也被称为css 精灵图. 网页通常包含多个图像.这些包括图标,按钮,徽 ...
CSS Sprites新手教程
CSS Sprites新手教程刚开始认真学习CSS的时候,发现一个CSS Sprites教程.后来群里的朋友问起这个问题,我很想把那个教程发给他看看,但是已经找不到了,所以就一直想自己写个CSS S ...
html中精灵图的使用方法,css sprites（精灵图）如何使用？
CSS Sprites是一种性能优化技术,一种网页图片应用处理方式:将多个图像组合成单个图像文件以在网站上使用的方法,以提高性能:也被称为css 精灵图. 网页通常包含多个图像.这些包括图标,按钮,徽 ...
css 在线生成器,CSS Sprites在线生成器
一款优秀的主题,不仅仅需要美观的设计,还需要最大的各项优化,最大可能地优化主题中用到的图片,也就变得十分重要,使用CSS Sprites技术是比较常见的手段,很多优秀的主题都很注重这一点.跟版模板网在 ...

css sprites demo

css sprites demo相关推荐

最新文章

热门文章