css - 具有圆边且无溢出的 CSS 色调图像

Question

我正在尝试在 Hover 上为图像着色。我有 css 工作，但一些具有圆形边缘或未完全填充父级的图像显示黑色背景：

（最左边有鼠标在它上面）

如何隐藏黑色所以只有 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

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

如果实际图像有白色边框......你有点不走运。您可以裁剪图像，但您无法为任何类型的图像动态地执行此操作。

Answer 2

如何隐藏黑色所以只有 img 是有色的？

尝试background: black从.thumb?

display: inline那里也不需要PS