用顏色和透明度疊加CSS圖像

我想弄清楚如果我可以添加覆蓋圖像像色調和更改不透明度，而不添加背景顏色。我沒有運氣，所以我想我會在這裏問。
我想用那種不透明度做成紅色。這是我到目前爲止。用顏色和透明度疊加CSS圖像

我做了一個圖像覆蓋它，如果我不得不叫overlay.png，但不知道它是否有必要。

img.highlighted { 
    opacity:0.4; 
}

基本上我想這樣做，但反轉，對於圖像着色徘徊徘徊時，不採取色調走的時候。
看看這裏
http://jsbin.com/igahay/3011/edit

來源

2013-07-18 srtstripes

如果你嘗試在Photoshop中，你會看到它也不會在那裏工作，只是因爲前提錯誤。在彩色基本圖像頂部疊加半透明彩色蒙版只會產生難看的結果，而不會重新着色結果。 –

如何將它與另一個圖像重疊，我想我可以處理該問題 – srtstripes

您可以使用CSS3，還是必須是完全跨瀏覽器的解決方案？ – gmo

如果你可以使用CSS3，與CSS:filter ANS專門-webkit-filter
^{嘗試（這不是一個完全的跨瀏覽器解決方案裏！）}

<img src="image.jpg" /> 
<style> 
    img:hover { 
     -webkit-filter: hue-rotate(240deg) saturate(3.3); 
    } 
</style>

這裏有幾個在線演示：

希望它的幫助..或至少點你在正確的方向。

來源

2013-07-18 11:45:10 gmo

這工作完美謝謝很多 – srtstripes

我很高興它有幫助。 – gmo

CSS過濾器不能在IE瀏覽器中工作是否有一種方法來覆蓋預先在photoshop中製作的過濾器？像一個透明的白色PNG洗白。 – Costa

如果你想使你表現考慮做這個願望相反：

.tint:hover:before { 
    background: rgba(0,0,250, 0.5); 

    } 

    .t2:before { 
    background: none; 
    }

，並期待在2日的畫面效果。

它應該看起來像this？

來源

2013-07-18 11:47:17

是的，這也工作 – srtstripes

UPDATED FIDDLE！ => http://jsfiddle.net/6ELSF/140/ –

等待wut？我想你是在錯誤的地方寫下評論的。 –

你試過了嗎Webkit Filters？

你可以操縱不僅混濁，而且顏色，亮度，亮度等性能：

CSS自定義過濾器混合模式範例：http://codepen.io/adobe/pen/nygsD

來源

2013-07-18 11:48:30 acudars

這樣的事情？ http://codepen.io/Nunotmp/pen/wKjvB

您可以添加一個空的div並使用絕對定位。

來源

2013-07-18 11:48:42

JSFiddle Demo

HTML：

<div class="image-holder"> 
    <img src="http://codemancers.com/img/who-we-are-bg.png" /> 
</div>

CSS：

.image-holder { 
    display:inline-block; 
    position: relative; 
} 
.image-holder:after { 
    content:''; 
    top: 0; 
    left: 0; 
    z-index: 10; 
    width: 100%; 
    height: 100%; 
    display: block; 
    position: absolute; 
    background: blue; 
    opacity: 0.1; 
} 
.image-holder:hover:after { 
    opacity: 0; 
}

來源

2013-07-18 12:08:58 Girish

感謝您的小提琴+片段 – ggzone

用顏色和透明度疊加CSS圖像

回答

相關問題