【问题】
折腾:
的过程中,用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却是包含了三张完整的图片的:
http://fiverr.com/assets/gig_show/gig_stats_badges.png
即,不是所期望的,单张的Level 2的图片。
所以,就又遇到了之前的就疑惑的那个问题:
为何有的网页中,是单张png图片中,包含了多张子png图片?
【解决过程】
1.后来通过:
将所有图片包含在一张图片中,以提高网页访问速度
得知,原来是为了响应提高速度才这么做的。
对应的实现方法有几种:
- CSS中背景图片定位方法中的:
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:
http://fiverr.com/assets/app_new-cc05e8376b5d41af81c6bc455950074e.css
其中有对应的定位的部分的css代码:
- badge-container level_two_seller:level 2
- 对应的css是:
.gig-stats li.badge-container.level_two_seller img{top:-71px;position:relative}#profile-badge span.badge-container.top_rated_seller img
- 对应的css是:
.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中的不同不同属性值,去设置对应的具体的位置,而获得特定的某个子图片的。