HTML/CSS - 圖像源的隱藏部分

Question

什麼會在img標籤隱藏圖像源的一部分的最好，最正確的方法

說我有以下幾點：

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

我的目標是將圖像封裝在一個圓角的容器中，這顯然會覆蓋頂部圖像的角落。

我是否應該將一個絕對定位的元素放在圖像的頂部，就好像您要在照片上放置一張切出的紙張，或者有其他替代方法？

Answer 1

如果你的目的是使圖像變圓潤的邊角，你可以只使用它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%; } 

注意，圖像只是一個藍色的矩形。

Answer 2

幾個選項：

• 處理圖像服務器側應用變換。
• 在圖像上覆蓋絕對定位的遮罩圖像。
• 使用一些帶圓角的巧妙CSS和絕對定位的透明元素來達到與蒙版圖像相同的效果。