0

私は一般的にWebプログラミングにまったく慣れていないので、htmlページに画像の一部を表示する方法を考えていました（スプライトに似ています-つまり、photoshop/gimpなどで変更せずに）。

そこで、丸みを帯びた角を含む「Connect with Facebook」だけを希望する次の画像があります。

HTML/CSSを使用してこれを達成するにはどうすればよいですか?

GIMP を使用して関連するビットをコピーし、それを jpeg などにエクスポートしようとしましたが、最終的な画像の品質が低下しているようです。

最後に、次のようなことを行います (twitter ブートストラップを使用):

<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>

したがって、画像自体を変更せずに画像のその部分を表示する方法を知りたいです。

ガイダンスをいただければ幸いです。ありがとう。

4

1 に答える 1

3

これはあなたが探しているものですか？

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>
于 2013-08-09T12:08:45.697 に答える