如何在不影響透明區域的情況下在圖像上添加顏色？

我想知道如何在不影響透明區域的情況下在圖像上添加顏色。我必須說，我想用一個硬轉換來應用漸變。如何在不影響透明區域的情況下在圖像上添加顏色？

我試圖通過svg實現它，但在漸變的動畫中存在問題。

我試圖通過掩碼，但它只能在webkit中正常工作。

有一個選項可以製作一個具有漸變效果的div，並在其上放置一張背景圖片（我已在其他網站上看到過），但是我的背景不允許這樣做並不明顯眼。

默認圖片：

它應該是：

它應該是可能的動畫：

感謝您的回答！ :)

來源

2016-11-22 Des1re

你有任何代碼，我們可以看到什麼？ –

@MthetheWWilcoxson我不知道我可以告訴你什麼代碼。 – Des1re

*也許* CSS過濾器的東西，但它不會很簡單。 –

並不完美，但可以是一個開始：

.base { 
 
    width: 300px; 
 
    height: 600px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    background-color: lightgreen; 
 
} 
 

 
.test { 
 
    width: 300px; 
 
    height: 200px; 
 
    background-image: url(https://i.stack.imgur.com/sklUO.png); 
 
    background-size: 100%; 
 
    position: absolute; 
 
    animation: move 12s infinite linear; 
 
} 
 

 
.t1 { 
 
    top: 0px; 
 
    background-position: 0px 0px; 
 
    filter: sepia(100%) saturate(200) hue-rotate(40deg); 
 
} 
 
.t2 { 
 
    top: 200px; 
 
    background-position: 0px -200px; 
 
    filter: sepia(100%) saturate(200) hue-rotate(130deg); 
 
    animation-delay: -3s; 
 
} 
 
.t3 { 
 
    top: 400px; 
 
    background-position: 0px -400px; 
 
    filter: sepia(100%) saturate(200) hue-rotate(220deg); 
 
    animation-delay: -6s; 
 
} 
 
.t4 { 
 
    top: 600px; 
 
    background-position: 0px -600px; 
 
    filter: sepia(100%) saturate(200) hue-rotate(310deg); 
 
    animation-delay: -9s; 
 
} 
 

 

 
@keyframes move { 
 
    from { 
 
    top: -200px; 
 
    background-position: 0px 200px; 
 

 
    } 
 
    to { 
 
    top: 600px; 
 
    background-position: 0px -600px; 
 

 
    } 
 
} 
 

 

 

 

 
body { 
 
}

<div class="base"> 
 
<div class="test t1"></div> 
 
<div class="test t2"></div> 
 
<div class="test t3"></div> 
 
<div class="test t4"></div> 
 
</div>

來源

2016-11-22 21:37:25 vals

據我瞭解，我只會使用過濾器。我不僅僅是rgb，絕對是任何顏色，但這個想法很有趣。 – Des1re

謝謝！我意識到有可能製作過濾器！很可惜，在IE中不起作用，但我會在網站的入口處要求下載一個正常的瀏覽器來使用站點：D – Des1re

只是一個想法，也許你應該創建一個PNG圖像的形狀被切出。所以你的圖像將在底部，然後在divs中，你可以將你的彩色divs以不透明度&作爲最後的一個，你保留新的png（反轉版本）作爲最頂層。這可能工作。

讓我知道。

謝謝！

來源

2016-11-22 15:04:45 realtymarker

我不能這樣做，因爲我的背景是動態的，所以在透明區域=背景和默認圖像=透明區域的地方切出png。如果它具有1％的不透明度，我們可以在底部div處看到漸變。如果我不理解你，請在https://jsfiddle.net/ – Des1re

上舉個例子你是什麼意思的動態背景？顏色是動態的/圖像本身是動態的？ – realtymarker

像這樣https://jsfiddle.net/hjvxcu92/ 首先有一張圖片，其中background-size：cover。如果它適用於漸變圖像，則返回到此選項將適合我。 – Des1re

如何在不影響透明區域的情況下在圖像上添加顏色？

回答

相關問題