带有圆边的CSS色调图像，没有溢出

Question

我正在尝试着色图像onHover。我有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

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

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

Answer 2

  

如何隐藏黑色，只有img有色？

尝试从background: black删除.thumb？

P.S。

也不需要display: inline