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

爲一張彩色圖片增長染色效果變成灰度圖片或者爲灰度模式的圖片增長染色效果變成彩色圖片的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;
}
複製代碼

效果以下圖所示：

基於混合模式的實現方式

接下來咱們來給圖片添加紅色的染色效果，咱們須要用到的是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%);
}
複製代碼

最終效果如圖所示：

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