1

imgタグで画像ソースの一部を隠すための最良かつ最も正しい方法は何ですか

私は次のものを持っているとしましょう：

<img alt="" src="myimage.jpg" class="photo" />

私の目標は、画像を角の丸いコンテナに収めることです。これにより、上部の画像の角が明らかに覆われます。

写真の上に切り抜き紙を置いているかのように、画像の上に絶対位置の要素を配置する必要がありますか、それとも何らかの代替手段がありますか?

4

2 に答える 2

3

画像の角を丸くしたい場合は、そのまま使用できますborder-radius。コンテナの角を丸くする必要があり、画像が切り取られる場合は、それを使用overflow: hiddenしてください。

このフィドルでそのデモを見つけることができます: http://jsfiddle.net/frozenkoi/hwDYV/

あなたが欲しいのはこれに似たものです

<div class="contact">
    <img src=http://jsfiddle.net/img/top-bg.png /><a href="#">Username</a>
</div>

この CSS では:

DIV.contact {background: silver; border-radius: 8px; margin: 10px auto 0 5px; width: 200px; text-align: center; overflow: hidden}
DIV.contact IMG {display: block; width: 100%; }

画像は単なる青い四角形であることに注意してください。

于 2012-05-10T19:20:14.260 に答える
1

いくつかのオプション：

  • 画像サーバー側を処理して、変換を適用します。
  • 絶対位置のマスク画像を画像の上にオーバーレイします。
  • マスク画像と同じ効果を実現するには、角が丸く、透明な要素が完全に配置された巧妙なCSSを使用します。
于 2012-05-10T18:37:42.190 に答える