帶有圓角邊緣且沒有溢出的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色調圖像

回答

相關問題