[求教]菜鸟求启蒙：PNG奇怪的图片怎么用到网页中的？

有种图片的用法好奇怪哦O.O不知道怎么语言表述，我用下面的实例来表达一下我的疑惑


图片1
图片2
以上是图片1和图片2，是成型后在页面中显示的样子，但是看了看CSS代码，招出来他们的原型，确是下面这样子的

右边的那一部分跑到图片下面去了O.O，这个显示错位的图片有啥玄机呀~~~
----------------------------------------------------------------------------------

还有这个图片 ,图片里显示出来两个同样的图像，但是在实际的页面中显示的却只有一个
如下面的导航条图片所示， 右下角的位置引用了上面图片的一半，
这是如何实现的啊，是用CSS隐藏了下面一半吗？还是别的方法？~

先占个沙发。

首先呢，楼主应该想到这样的一个问题，一个页面加载多个图片速度快，还是加载一张图片速度快。
答案肯定是加载一张图片速度要快了。
把页面上的常用到的图片，整理到一张图片中，通过background-position设置显示图片的位置，提高背景图片的加载速度。
建议楼主了解一下background-position的用法。

楼主看下这张图片，整个网站就用了这一张图片。

楼上说的可以。我不是沙发。不懂在问我吧

lynn.sh 发表于 2012-11-9 07:27
首先呢，楼主应该想到这样的一个问题，一个页面加载多个图片速度快，还是加载一张图片速度快。
答案肯定是 ...

啊，你提到background-position的时候我差不多有点了解了，我再去细细研究一下哈:)
感谢指点哈:)   
{:soso_e165:}  {:soso_e112:}