圖像到一個影子（只有形狀） - CSS

我有一個像這樣的img：example image，我想將它轉換爲像這樣的img：example shadow-image。圖像到一個影子（只有形狀） - CSS

我試過filter: grayscale(100%);但它只是將顏色轉換成灰度，內部形狀倖存下來。

所以我想改變圖像中的所有內容，除了透明度以黑色。我該怎麼做？

來源

2016-12-03 Brunon Blok

灰度化後，超過100％，增加對比度：https://developer.mozilla.org/en-US/ docs/Web/CSS/filter＃contrast（）_ 2 – connexo

看起來像是關閉的，所以我的答案變成了帶過濾器的註釋**，您可以將對比度和亮度降至0：** http://codepen.io/gc- nomade/pen/ZBrvdL'過濾器：對比度（0％）亮度（0％）' –

@PraveenKumar'過濾器：對比度（0％）亮度（0％）'足夠了，不需要畫布或任何其他東西，可以？ –

與過濾器，你可以把對比度和亮度下降到0：

img:hover, 
 
img + img { 
 
    /* black */ 
 
    filter: contrast(0%) brightness(0%); 
 
} 
 
img + img:hover { 
 
    /* gray */ 
 
    filter: contrast(0%) brightness(100%); 
 
} 
 
img { 
 
    transition: 0.5s 
 
}

<img src="https://i.stack.imgur.com/M4Qup.png" /> 
 
<img src="https://i.stack.imgur.com/M4Qup.png" />

這裏是codepen與 http://codepen.io/gc-nomade/pen/ZBrvdL

音符播放如果您正在處理一張圖片，其中

沒有透明度或不被用於形狀

是背景顏色上IMG設置

它不是一個translucide PNG或GIF

它可以使用很多圖片

當透明屬性未知時

，那麼你可能想看看這個問題，其他哪個Silhouette a PNG image using CSS應該滿足您的需求

來源

2016-12-03 22:37:26

圖像到一個影子（只有形狀） - CSS

回答

相關問題