带有圆角边缘且没有溢出的CSS色调图像

我正在尝试着色图像onHover。我有CSS工作，但其中一些有圆边或不完全填充父显示黑色背景的图像： enter image description here 带有圆角边缘且没有溢出的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; 
}

来源

2012-11-14 Nick

你用这些标记是什么？ – kinakuta

“色调”不知道图像中的实际内容。没有手动设置所有这些，我不知道你期望CSS如何解决它。 –

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

如果实际图像有一个白色的边框...你有点不幸。您可以使用crop图片，但您无法动态地对任何图片进行此操作。

来源

2012-11-14 20:07:28 sachleen

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

尝试从.thumb删除background: black？

P.S. display: inline也不需要那里

来源

2012-11-14 20:11:05 Neps

带有圆角边缘且没有溢出的CSS色调图像

回答

相关问题