选择一个jpeg图像的一部分在html中显示 [英] select part of a jpeg image to display in html

问题描述

我对网络编程一般都很陌生，我想知道如何在html页面上显示图像的一部分（类似于精灵 - 即不需要在photoshop / gimp等中修改它）。 b
$ b

因此，我有以下，其中，我想只是与Facebook连接，包括圆角。

如何使用HTML / CSS实现此目的？

我试图使用GIMP复制相关位，然后将其导出回jpeg等。但最终图像似乎质量很差。

最后我做了类似的事情（使用twitter bootstrap）：

 < div class =row-fluid分页为中心的> 
 
< ul class =thumbnails> 
< li class =span4 offset4> 
< a class =thumbnailhref =＃> 
< img alt =Facebook资料data-src =holder.js / 273x42style =width：273px; height：42px; SRC = fb.jpg > 
< / a> 
< / li> 
 
< / ul> 
< / div> 
  

因此，我想知道如何在不修改图像本身的情况下显示图像的那一部分。

任何指导都将不胜感激。
Thanks。

解决方案

这是您要查找的内容吗？

http://jsfiddle.net/5VQBD/1/

  .fb-connect {width：280px;高度：46px;背景：url（'http://www.inventlayout.com/Uploads/aj2w103qhnc3186/Facebook-64-thumb.jpg'）no-repeat -46px -126px; -moz-border-radius：5px; 
 -webkit-border-radius：5px; 
 -khtml-border-radius：5px; 
 border-radius：5px;} 
 
 
 
< div class =fb-connect>< / div> 
  

I am quite new to web programming in general and I was wondering how I could show a part of an image on a html page (similar to sprites - i.e without modifying it in photoshop/gimp etc).

So, I have the following image, where, I would like just the "Connect with Facebook" including the rounded corners.

How can I achieve this using HTML/CSS?

I tried to copy relevent bits using GIMP and then exporting it back to jpeg etc.. but the final image seems to loose quality.

At the end I do something like (using twitter bootstrap):

<div class="row-fluid pagination-centered">

        <ul class="thumbnails">
          <li class="span4 offset4">
            <a class="thumbnail" href="#">
              <img alt="Facebook stuff" data-src="holder.js/273x42" style="width: 273px; height: 42px;" src="fb.jpg">
            </a>
          </li>

        </ul>
</div>

Therefore, I would like to know how to show that part of the image without modifying the image itself.

Any guidance would be greatly appreciated. Thanks.

解决方案

Is this what you are looking for?

http://jsfiddle.net/5VQBD/1/

.fb-connect{width:280px; height:46px; background:url('http://www.inventlayout.com/Uploads/aj2w103qhnc3186/Facebook-64-thumb.jpg') no-repeat -46px -126px; -moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;}



<div class="fb-connect"></div>

这篇关于选择一个jpeg图像的一部分在html中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！