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和绝对定位的透明元素，以达到与蒙版图像相同的效果。

HTML / CSS - 隐藏图像源的一部分

2 个答案: