實現圖片染色效果的三種方式

魑魅魍魎Rashomon發表於2019-02-18

為一張彩色圖片增加染色效果變成灰度圖片或者為灰度模式的圖片增加染色效果變成彩色圖片的css實現方式，有基於濾鏡，基於混合模式的實現方式。

基於濾鏡的實現方式

我們來為彩色圖片新增一個灰色的染色效果，可以使用多個濾鏡組合的方式來實現。 首先使用的是sepia()，它會給圖片增加一種深褐色的染色效果，值為100%則完全是深褐色，值為0%影象無變化，若值在0-100，則是效果的線性乘子。現在的圖片是呈現深褐色。

filter: sepia(100%);
複製程式碼

我們還需要更高的主色調飽和度，接下來使用saturate() 濾鏡來給每個畫素提升飽和度，saturate的值0-100%分別表示完全不飽和與圖片無變化，若超過100%則有更高的飽和度。我們將saturate的值設為200%，這兩個濾鏡的組合會讓圖片具有一種橙黃色的染色效果。

filter: sepia(100%) saturate(200%);
複製程式碼

但是此時還不能滿足我們的效果，我們還需要使用另外一個濾鏡hue-rotate() 濾鏡，把每個畫素的色相以指定的度數進行偏移。我們將值設定在160deg左右，即可實現一個灰色的染色效果，並且新增動畫效果。

<img src="test.jpg" alt="test" />
複製程式碼

css實現：

img {
    transition: .5s filter;
    filter: sepia(100%) saturate(200%) hue-rotate(160deg);
}
img: hover {
    filter: none;
}
複製程式碼

效果如下圖所示：

1550395498882

基於混合模式的實現方式

接下來我們來給圖片新增紅色的染色效果，我們需要用到的是luminosity混合模式,這種混合模式會保留上層元素的 HSL 亮度資訊，並從它的下層吸取色相和飽和度資訊。

要對一個元素設定混合模式，有兩個屬性可以派上用場:mix-blend- mode ，background-blend-mode 。 第一種屬性: mix-blend- mode可以為整個元素設定混合模式，使用該屬性需要把圖片包裹在一個容器中，並把容器的背景色設定為我們想要的主色調。

<p>
    <img src="test.jpg" alt="test" />
</p>
複製程式碼

css實現 ：

p{
    width: 400px;
    height: 300px;
    background: hsl(335, 100%, 50%);
}
img {
    width: 100%;
    height: 100%;
    mix-blend-mode: luminosity;
}
複製程式碼

第二種屬性：background-blend-mode 可以為每層背景單獨指定混合模式。使用該屬性不用圖片元素，而是用

元素——把這個元素的第一層背景設定為要染色的圖片，並把第二層的背景設定為我們想要的主色調。

<div class="test-image">
複製程式碼

css實現：

.test-image {
    width: 400px;
    height: 300px;
    background-image:url(test.jpg);
    background-size: cover;
    background-color: transparent;
    background-blend-mode: luminosity;
    transition: .5s background-color;
}
.test-image:hover {
    background-color: hsl(335, 200%, 50%);
}
複製程式碼

最終效果如圖所示：

1550395512153

不過，這兩種方法都不夠理想。它們的主要問題在於： 第一種屬性的實現不能實現動畫效果 第二種屬性的實現，在語義上，這個元素並不是一張圖片，因此並不會被讀屏器之類的裝置讀出來

相關文章