html - 灰度+顏色疊加

我試圖創建一個圖像開始和全綵色的懸停效果，當我將鼠標懸停在圖像上時，我希望它具有藍色疊加層。html - 灰度+顏色疊加

事情是，只有一個簡單的藍色覆蓋，它只是把藍色的半透明塊在彩色圖像頂上......這意味着其他顏色通過一點點顯示。我想要的是讓圖像變成藍色。

現在，我已經設法得到一個圖像灰度，我設法得到一個藍色的覆蓋，但有什麼辦法讓CSS來堆疊效果？轉動圖像灰度，然後將顏色與其相乘。

更簡單的方法可能只是創建一個光柵圖像的效果，然後讓它改變圖像，但它可以很好，如果它可以在代碼中完成，反而。

來源

2014-03-03 ZippoS

+1好問題，解釋清楚你使用 – egrunin

什麼碼讓圖像去灰度？ – xec

可能重複？ http://stackoverflow.com/questions/17721960/css-image-overlay-with-color-and-transparency – enguerranws

我認爲你正在尋找CSS filter屬性。看到大衛沃爾什的演示在這裏：http://davidwalsh.name/demo/css-filters.php

它目前是實驗性的，只有Webkit支持我認爲，但它是唯一的方式來實現與CSS。

您還可以看看到Adobe CSS自定義過濾器：http://html.adobe.com/webplatform/graphics/customfilters/cssfilterlab/

的事物的演示中，我覺得你想要做的：http://jsbin.com/igahay/3011/（從這個主題：CSS image overlay with color and transparency）

來源

2014-03-03 17:39:55 enguerranws

嗯，http://jsbin.com/igahay/3011上的例子與我想要做的類似，只有它纔會進行顏色疊加...例如，右上方的圖像覆蓋了藍色。你仍然可以看到綠色的色調。我想要做的更多的是這樣的： http://i.imgur.com/RvynvTn.jpg – ZippoS

@zippo ...你可以用自定義過濾器做到這一點，只是做一點實驗。 – slynagh

您必須在原始圖像上放置灰度過濾器，並使用藍色覆蓋圖。 – enguerranws

使用兩個圖像會給您更大的靈活性，以可能產生的影響，過渡等

我會使用這樣的：

img.front { 
 
    position: relative; 
 
    opacity: 0; 
 
    transition-property: opacity; 
 
    transition-duration: 1s; 
 
} 
 

 
img.front:hover { 
 
    opacity: 1; 
 
} 
 

 
img.back { 
 
    position: absolute; 
 
}

<img class="back" src="https://lh5.googleusercontent.com/-uM248yE5o9M/VFzw11HH-GI/AAAAAAAAJ5c/KrG1kM7XCsc/w400-h225-no/image-b.jpg" /> 
 
<img class="front" src="https://lh4.googleusercontent.com/-g4UhBKn4KKk/VFzw16RyQQI/AAAAAAAAJ5g/RybFWXp9YXc/w400-h225-no/image-f.jpg" />

來源

2014-11-07 16:21:31 Costas

這裏唯一的問題是你已經把數據大小加倍了 – jbutler483

如果你可以使用一些css過濾器來改變圖像，那麼數據大小將是相同的 - 只需要將過濾器應用到後面或前面的圖像並使用相同的網址。除非你的圖像是巨大的，我會使用這兩個圖像解決方案，因爲它更加靈活。 Css過濾器並不涵蓋所有可能性。想象一下，例如，試圖在照片上添加聚光燈或眩光效果等。可能的，但我很懶，我更喜歡兩張照片:) – Costas

當你通過MB購買雲存儲時，它會更多，它開始變得......投標。 – jbutler483

單圖像和CSS濾鏡（如果你是滿意的結果）：

\t \t img.front { position: relative; opacity: 0; transition-property: opacity; transition-duration: 0.5s; } 
 
\t \t img.front:hover { opacity: 1; } 
 
\t \t img.back { position: absolute; -webkit-filter: sepia(100%) hue-rotate(180deg) saturate(300%); }

<img class="back" src="https://lh4.googleusercontent.com/-g4UhBKn4KKk/VFzw16RyQQI/AAAAAAAAJ5g/RybFWXp9YXc/w400-h225-no/image-f.jpg" /> 
 
<img class="front" src="https://lh4.googleusercontent.com/-g4UhBKn4KKk/VFzw16RyQQI/AAAAAAAAJ5g/RybFWXp9YXc/w400-h225-no/image-f.jpg" />

來源

2014-11-07 17:01:22 Costas

「棕褐色」和「色調旋轉」的完美結合。我想知道爲什麼'棕褐色'沒有采取可選的顏色，啊，sepiate進入。 –

html - 灰度+顏色疊加

回答

相關問題