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

【问题标题】：Darkening a rounded image using either CSS or Javascript使用 CSS 或 Javascript 使圆形图像变暗
【发布时间】：2012-09-03 06:31:50
【问题描述】：

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

http://jsbin.com/icemiy/1/edit

Darken image on rollover

还有其他纯粹通过 css 或 javascript（当然包括 jQuery）的方式来做到这一点。提前致谢！

【问题讨论】：

我不知道。您可以通过 javascript 实现此目的。在CSS 中，您可以使用divs 来实现带色调的圆角效果。
在您提供的第一个链接上，如果您在 .tint 类和图像上都设置了边框半径，它将起作用

标签： javascript jquery css html

【解决方案1】：

http://jsfiddle.net/L7rWJ/

完全可以使用 css。

将叠加层和图像都弄圆：

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

哦，如果你不关心 ie，你可以使用过渡来获得额外的好处：http://jsfiddle.net/fYEWr/

【讨论】：

【解决方案2】：

您可以在图像及其容器上使用background-clip -DEMO

  figure {
    border-radius: 10px;
    -moz-background-clip: padding; 
    -webkit-background-clip: padding-box; 
    background-clip: padding-box;
  }

  img {
    float: left;
    background: black;
    display: block;
    -moz-transition: opacity .3s linear;
    -webkit-transition: opacity .3s linear;
    -ms-transition: opacity .3s linear;
    -o-transition: opacity .3s linear;
    transition: opacity .3s linear;

    border-radius: 10px;
    -moz-background-clip: padding; 
    -webkit-background-clip: padding-box; 
    background-clip: padding-box;
  }

【讨论】：

仅在图形中添加边框半径即可，您不需要 img 边框半径。但与其他答案相比，你是正确的 :) +1
@MilanJaric nope :) 如果没有 img 边界半径，它将无法工作 - jsbin.com/icemiy/129/edit
@ZoltanToth 我已经尝试过你的方法并且它正在改进，但是我从颜色中得到了大量溢出，即使我的代码与示例相同（我认为）。有什么想法吗？谢谢！
@ZoltanToth 嗯，这太奇怪了。您的示例完美运行，但是，它将我的图像变成白色而不是黑色...我知道 #000 是黑色的，所以我不知道为什么会发生这种情况....添加了另一张照片。
@ZoltanToth 另外，有没有办法动态设置#figure 的宽度？目前我们将其硬编码为 200px。

【解决方案3】：

我使用本教程解决了我的问题http://mattbango.com/notebook/web-development/hover-zoom-effect-with-jquery-and-css/

希望尝试做同样事情的人会找到这个页面，并且这几种解决方案中的一种对他们有用！

谢谢大家！

【讨论】：

【解决方案4】：

将边框半径添加到您为其提供背景颜色的容器。

在您的 jsBin 示例中：

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

【讨论】：

【解决方案5】：

你可以把这段代码放在 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;

【讨论】：