三種用純CSS實現染色效果的方法

2016-10-03 15:48

網頁設計

標籤：css

1600

為一張增加染色效果(color tint)漸漸變成了一種潮流。它可以給**上的乙個統一的色調，當你與發生互動時還可以變化成另外一種風格。

有時候，這種效果也被運用到一些特殊的情況下，比如默哀。

一直以來，我們需要使用影象處理軟體來生成兩個版本，然後在寫一些簡單的css**來處理這兩個版本的交替顯現。這個方法行得通，但它會導致你需要更多的資源。另外一種方法是：在上層遮蓋一層半透明的純色；或者把設定為半透明。但這個不是真正意義上的染色效果：不僅沒有把的各種顏色轉換為目標色調，同時也極大削弱了的對比度。

由於沒有一種現成的濾鏡是專門為了這個效果而設計的，我們需要花費一些心思，把多個濾鏡組合起來。

我們使用的第乙個濾鏡是sepia()，它會給增加一種降飽和度的橙黃色染色效果，幾乎所有畫素的色相值會被收斂到35~40。

如果我們想要的主色調飽和度比這個更高，可以用saturate()濾鏡來給每個畫素提公升飽和度。假設我們想要的主色調是hsl(335,100%,50%)，那就需要把飽和度提公升一些。具體取決於實際情況，我們通常需要用肉眼來觀察和判斷。這種效果有一種暖**色的染色效果。

看起來很不錯了，但我們需要的是亮粉色。因此，我們還需要再新增乙個hue-rotate()濾鏡，把每個畫素的色相以指定的度數進行偏移。因此，我們就到如下**和效果：

filter:sepia(1) saturate(4) hue-rotate(295deg);

img.lvjing img.lvjing:hover

你可能會發現，濾鏡產生的結果與我們在影象處理軟體中得到的效果不完全一致。即使我們想把影象調為一種很亮的顏色，結果仍然會顯得像褪了色一般。如果嘗試把saturate()濾鏡增加飽和度，又會得到一種不自然的、過度風格化的效果。不過，幸好我們還有另外一種更好的實現方法——混合模式！

如果用過類似photoshop的朋友就會知道，當我們把兩個元素疊加時，混合模式控制了上層元素的顏色與下層元素進行混合。用它來實現混合模式會保留上層元素的hsl亮度資訊，並從它的下層吸取色相和飽和度資訊。如果在下層準備好我們想要的主色調，並把待處理的放在上層並設定為這種混合模式，那本質上就是在做染色處理。

要對乙個元素設定混合模式，有兩個屬性可以派上用場：max-blend-mode可以為整個元素設定混合模式，background-blend-mode可以為每層背景單獨置頂混合模式。這意味著，如果用這個方案來處理，我們實際上有兩種選擇，不過各有千秋：

針對不同的場景，可以選擇這兩者其中之一。舉例來說，如果我們希望對乙個元素應用到這個效果，就需要把它包含在另乙個元素內部。不過如果我們有了這一層容器，比如，那就水到渠成了。

然後，只需要兩行**就可以實現這個效果：

a

img

和css濾鏡類似，混合模式可以平穩退化，如果不支援，效果只是不出現而已，本身還是完好可見的。另外還有一點要注意，濾鏡可以動畫，混合模式不行。

max-blend-mode是把整個元素向下進行混合，而不管它下層是什麼。因此，如果我們把這個屬性設定為luminosity混合模式，那就總算會跟著某些東西進行混合。此外，使用background-blend-mode屬性則可以讓每層背景跟它的下層進行混合，但並不關係元素之外是什麼情況。另外，當我們只有乙個背景影象以及乙個透明背景色時，會發生什麼？

不會出現任何混合效果！

那麼，我們嘗試用background-blend-mode屬性來達成我們想要的效果。先調整下html：

這樣一來，我們只需要對乙個設定css了，因為這個技巧不需要其他額外的元素：

.img .img:hover

不過，就和之前提到的那樣，這兩種方法都不理想。它們的主要問題在於：

生活就是這樣，沒有完美的。需要用到哪種，就看各位的需求了。

三種用純CSS實現染色效果的方法

用純CSS實現簡易翻書效果

VMware ESXi Vlan的三種實現方式

純CSS實現div三角效果

三種用純CSS實現染色效果的方法

用純CSS實現簡易翻書效果

VMware ESXi Vlan的三種實現方式

純CSS實現div三角效果

相關推薦