html - 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 来实现与蒙版图像相同的效果。