css，做网页时看到很多网站都用到了下面这个png的图片，然后通过定位来选择哪个图片来显示，求专业解释。

Posted 2023-05-06

我看到很多网站都用到过这样的，觉得应该可以学习下，但是不是很了解，所以请解释下，然后请问有没有哪里可以学用这个？这个用css写不写的出来？

这种做法叫做css精灵，CSS Sprites，或者集合图片法。

原理：
原理就是把所有图片（前提是图片较小）都集合在一张图中，然后利用css样式中的background-position属性来准确定位到位置。

优点：
可以减少http请求，提高性能，本来四张图片要请求四次，现在一次搞定。

缺点：
就是处理起来比较麻烦，需要改动其中一个就要改整个图。

需要用ps先定位好每个图片的位置。
对html容器也有较高的要求，宽高都对背景会有依赖。

所以建议在比较稳定的页面，不需要经常改动的地方用css精灵的方法，如果需求经常变动，我觉得直接用单图也可以。 参考技术A 就是用样式写出来的，
div background:#FFF url(image) no-repeat fixed x y;
这里的background的属性值依次为：
#FFF 背景色：（颜色值，背景图片没有覆盖的地方，或者没有背景图片时表现的背景色）
image 背景图片：（这里是图片的地址）
no-repeat 是否重复：（图片小于容器的大小时，默认会重复排列图片以填满容器，no-repeat表示不重复，只有这个时候后面的定位坐标才有用。）
fixed 背景是否随容器滚动：（有两个可选值，scroll滚动，fixed不滚动，默认是scroll）
x y 背景图像的定位：（注意，只有在no-repeat下定位才有意义） 参考技术B 当然用CSS能写了来，
用把要用到的地方都用background:url();

然后针对不同的地方，用 background-position: -123 0;类似的语句就可以实现了
第一个参数是横向，第二个是纵向

TinyPNG---一个压缩PNG的神站

 

如何把网页中要用到的图片压缩到最小，这是前端攻城师们在写网页时都会考虑的一个问题，今天小坊给各位带来了给前端攻城师们真正的良心网站---TinyPNG。

只需要简单的两步就可以把你要压缩的PNG格式图片压缩到小很多又基本上不会影响图片的质量：

1.打开网址：http://tinypng.org/

2.选择你要压缩的PNG图片或者直接将你要压缩的图片拖拽到网页中间的大框框内。

3.压缩完成，点击download下载即可。

一般的图片都可以压缩到50%以上哦

前端攻城师们再也不用担心图片太大加载过慢的问题了~