Question

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

所以，我有以下image，其中，我想要“连接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>

选择jpeg图像的一部分以html显示

1 个答案: