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

【问题标题】：HTML/CSS - Hiding part of an image sourceHTML/CSS - 隐藏图像源的一部分
【发布时间】：2012-05-19 09:21:00
【问题描述】：

在 img 标签中隐藏部分图像源的最佳和最正确的方法是什么

假设我有以下内容：

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

我的目标是将图像包含在一个圆角容器中，这显然会覆盖图像顶部的角。

我应该直接在图像顶部放置一个绝对定位的元素，就像在照片上放置一张剪纸一样，还是有其他替代方法？

【问题讨论】：

标签： html css image background-image src

【解决方案1】：

几个选项：

处理图像服务器端以应用转换。
在图像之上叠加一个绝对定位的蒙版图像。
使用一些带有圆角和绝对定位的透明元素的巧妙 CSS 来实现与蒙版图像相同的效果。

【讨论】：

我正在考虑为 img 设置背景图像，但随后发布它会落后于源中定义的图像：/ 我试图消除图像处理。这个网站的目标是成为一个类似设置的论坛，人们可以将他们的图片上传到他们的个人资料中。

【解决方案2】：

如果您的意图是使图像变为圆角，则可以在其上使用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%; }

请注意，图像只是一个蓝色矩形。

【讨论】：