最新消息:20210917 已从crifan.com换到crifan.org

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

CSS crifan 1673浏览 0评论

【问题】

折腾:

【记录】C#中的HTML解析

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

http://fiverr.com/maxsimpson/create-500-high-pr-seo-backlinks-for-your-web-page-which-are-google-panda-and-penguin-safe-backlink-will-ping-back-links

其中,想要搞清楚,当前的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.后来通过:

将所有图片包含在一张图片中,以提高网页访问速度

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

对应的实现方法有几种:

    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
    • badge-container top_rated_seller:top rated level
      • 对应的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中的不同不同属性值,去设置对应的具体的位置,而获得特定的某个子图片的。

    转载请注明:在路上 » 【已解决】网页中的图片,一张(png)图片包含多张图片,如何通过css去定位对应的子png图片

    发表我的评论
    取消评论

    表情

    Hi,您需要填写昵称和邮箱!

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址
    89 queries in 0.193 seconds, using 20.16MB memory