【已解决】网页中的图片，一张（png）图片包含多张图片，如何通过css去定位对应的子png图片

【问题】

折腾：

的过程中，用IE9的F12去调试某个网页，比如：

其中，想要搞清楚，当前的level，此处是2.

但是却发现，其显示的图片，对应的html是：

		<li class="badge-container level_two_seller">
			<img alt="Gig_stats_badges" src="/assets/gig_show/gig_stats_badges.png" />		</li>

而对应的图片：

gig_stats_badges.png却是包含了三张完整的图片的：

即，不是所期望的，单张的Level 2的图片。

所以，就又遇到了之前的就疑惑的那个问题：

为何有的网页中，是单张png图片中，包含了多张子png图片？

【解决过程】

1.后来通过：

得知，原来是为了响应提高速度才这么做的。

对应的实现方法有几种：

    　　1）关键字：background-position: top left;

    　　2）像素：background-position: 0px 0px;

    　　3）百分比：background-position: 0% 0%;

div{ background:#FFF url(image) no-repeat fixed x y;}

style="clip: rect(0px 18px 17px 0px); position: absolute;

2.但是此处，经过调试，却貌似没有找到对应的上述的方法，所以，貌似无法获得，如何计算出来对应的图片的。

3.后来经过细心查看才知道，原来是在html中，通过

class的属性不同来决定的：

level_two_seller

top_rated_seller

然后两者都是用到了同一个css：

其中有对应的定位的部分的css代码：

.gig-stats li.badge-container.level_two_seller img{top:-71px;position:relative}#profile-badge span.badge-container.top_rated_seller img

.gig-stats li.badge-container.top_rated_seller img{top:-138px;position:relative}.profile-details

另外还有：针对于level_one_seller的：

.gig-stats li.badge-container.level_one_seller img{top:-5px;position:relative}#profile-badge

最终，才搞懂，如何从一个png图片集合（包含多个子png图片），获得对应的子图片的。

【总结】

目前所见到的，都是通过一个css去根据html中的不同不同属性值，去设置对应的具体的位置，而获得特定的某个子图片的。

Post Views: 740