使用CSS或Javascript使圆形图像变暗

到目前为止，我看到的所有使图像变暗的解决方案都适用于没有圆角的图像。这是有问题的，因为我看到的所有解决方案都要求使用背景色。当角变圆时，背景色显示为透明。我说的是这些解决方案：

是否还有其他方法仍然纯粹通过css或javascript（当然包括jQuery）来实现这一点。提前谢谢

---

将边框半径添加到要为其指定背景色的容器中

在jsBin示例中，请执行以下操作：

  .tint {
    overflow: hidden;
    float: left;
    background: blue;
    margin: 0 20px 20px 0;
    border-radius:20px;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
  }

完全可以使用css

覆盖层和图像均为圆形：

#overlay, img{
    -webkit-border-radius:15px;
    -moz-border-radius:15px;
     border-radius:15px;
}

---

哦，如果你不在乎ie，你可以使用过渡来获得额外的细节：

你可以在图像及其容器上使用

背景剪辑-

您可以将此代码放入img、img hover和tint中，使其具有圆角

-webkit-border-radius:10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;

我用这个教程解决了我的问题

希望尝试做同样事情的人能找到这个页面，其中一个解决方案对他们有效

谢谢大家
 我不知道。您可以通过javascript实现这一点。在
CSS
中，您可以使用
divs
来实现着色的圆角效果。在您提供的第一个链接上，如果您在
.tint
类和图像上都设置了边框半径，则仅将边框半径添加到图形即可，您不需要img边框半径。但与其他答案相比，你的答案是正确的：）+1@MilanJaric不：）如果没有img边界半径-@ZoltanToth，它将无法工作。我尝试了你的方法，它正在改进，但是我从颜色中得到了大量溢出，即使我的代码与示例完全相同（我认为）。有什么想法吗？谢谢@ZoltanToth嗯这太奇怪了。您的示例效果很好，但它将我的图像变为白色而不是黑色…我知道#000是黑色的，所以我不知道为什么会发生这种情况…添加了另一张照片。@ZoltanToth还有，有没有办法动态设置#地物的宽度？目前我们正在将其硬编码为200px。
-webkit-border-radius:10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;