CSS Sprites网页图片整合方法

2016-02-20 00:03 11 1 收藏

今天图老师小编要向大家分享个CSS Sprites网页图片整合方法教程，过程简单易学，相信聪明的你一定能轻松get！

【 tulaoshi.com - Web开发】

论坛上提到这样的问题：css中用一张背景图做页面的技术有什么优势？

简单介绍一下 CSS Sprites 的优点：
当用户往U盘中拷200张图片，会等很久。但是如果弄成一个文件，再拷贝就会快很多。

CSS Sprites 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。

css-sprites

实现方法：

首先将小图片整合到一张大的图片上然后根据具体图标在大图上的位置，给背景定位。background-position:-8px -95px;

来源:http://www.tulaoshi.com/n/20160220/1631166.html

上一篇： CSS相关知识介绍
下一篇： css教程:DIV布局网页的常见错误

看过《CSS Sprites网页图片整合方法》的人还看了以下文章更多>>

用css使网页图片半透明

标签： Web开发

你用过css么？当然，我是指你喜欢做网页的话，用过？很好，那你用过它的特效么？没有？那请跟我来。让我先通俗的介绍一下css，css不属于html，它属于html的辅助语言，在没有css之前，网页是静态的，但自从有了css 后，网页制作的历史就要重写了，css能给网页加入许多你想象不到的动态效果，这也是其中一点而已，因为css中有很多特效...

如何使用CSS Sprites优化你的网站

标签： Web开发

使用CSS Sprites是在你尽可能地使用其他的优化策略后最后的一招。它将你的所有图片放在一张图中，即你的一张CSS Sprites由10张图片组成，那将避免9次HTTP请求，这减少的9次请求时延，正是加速的加载时间。这也有问题，跟每个HTTP请求的服务器开销一样，需由Apache的子进程管理，占用20MB的内存。你最好帮你的服务器进程减少HTTP请求：卸载...

css sprites把很多小图集成在一张图片上

标签： Web开发

在google中搜索一下css sprites这个名称，会查出很多信息，并且随着SEO越来越被人们重视，采用这种技术来进行图片优化的网站越来越多，国内几家大型门户网站无不仿效。如新浪，网易，搜狐。你下载一下他们的网站上的图片，你会看到他们将很多小图片全部集成在一张图片上。这样做的好处是不言而语：加速图片显示利用CSS技巧减小HTTP请求 ...

网页制作实例：用CSS实现图片垂直居中方法

标签： Web开发

网页制作，用CSS实现图片垂直居中方法 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"style type="text/css"!--body {margin:0;padding:0}div {width:500px;height:500px;line-height:500px;border:1px solid #ccc;overflow:h...

用CSS实现网页图片的预加载

标签： Web开发

有很多种方法来实现图片的预加载，通常大部分使用Javascript让事情滚动。不要再受Javascript预载的束缚了吧，用CSS你就可以毫不麻烦的预载你的图片。为什么使用预载你为什么会考虑使用预载呢？你是否曾有个网站，在那个网站你要滚动你的导航然后有个延迟直到图片被加载完嘿嘿。预载将在这方面帮助你。它将在页面加载的时候加载那些图片...

查看更多精彩>>