具有圆形边缘且无溢出的 CSS 色调图像

Question

我正在尝试在悬停时对图像进行着色。我有 css 工作，但一些具有圆 Angular 边缘或未完全填充父级的图像显示黑色背景:

(最左边有鼠标在上面)

如何隐藏黑色以便只有 img 有色？

这是我的CSS:

.thumb {
    width:150px;
    height:150px;
    margin: 0px 5px 14px 14px;
    float:left;
    display:inline;
background: black;
    overflow:hidden;
    cursor: pointer;
    /*border: 2px solid #00A3C6; */
}

.thumb img {
    display: block;
    -webkit-transition: all 0.25s linear;
       -moz-transition: all 0.25s linear;
        -ms-transition: all 0.25s linear;
         -o-transition: all 0.25s linear;
            transition: all 0.25s linear;

}

.thumb:hover img { 
    opacity: 0.7;
}​

Answer 1

如果图像有圆 Angular ，您可以在您的 css 中使用 border-radius 来设置“tint”容器的圆 Angular 。

如果实际图像有白色边框……那你就有点不走运了。你可以crop图像，但您无法对任何类型的图像动态执行此操作。