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

Question

到目前为止，我看到的所有解决方案都是为了使图像变暗而没有圆角的图像。 这是有问题的，因为我见过的所有解决方案都要求使用背景颜色。 当角落倒圆时，背景颜色显示出来。 我在谈论这些解决方案：

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

翻转时使图像变暗

是否还有其他方法可以完全通过css或javascript（当然包含jQuery）。 提前致谢！

Answer 1

http://jsfiddle.net/L7rWJ/

可以完全用css完成。

围绕叠加层和图像：

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

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

Answer 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;
  }

Answer 3

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

希望人们尝试做同样的事情会找到这个页面，这些解决方案中的一个将适用于他们！

谢谢大家！

Answer 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;
  }

Answer 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;