html - 选择要在 html 中显示的 jpeg 图像的一部分

Question

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

所以，我有下面的图片，我想要“与 Facebook 联系”，包括圆角。

如何使用 HTML/CSS 实现这一目标？

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

最后我做了类似的事情（使用 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>

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

任何指导将不胜感激。谢谢。

Answer 1

这是你想要的？

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>