圖示是前端頁面中不可避免要用到的，常用圖示的形式也有多種：圖片、字型、SVG。目前越來越多的會使用SVG和字型圖示，其中一個原因就是字型和SVG都能動態改變顏色，而圖片卻不能，因為很多情況下我們需要對同一個圖示進行不同的顏色顯示。

那麼，圖片究竟可不可以改變顏色呢？通常我們可以再 PS 中修改一個圖片的顏色，但是 在 HTML 中還真沒聽說過。

這可能是咱們孤陋寡聞了，還真就這樣一個神奇的CSS屬性

<div class="box">
    <span class="icon"></span>
</div>

.icon{
    width:100px;
    height:100px;
    display:inline-block;
    background-image:url('icon.jpg');
    background-size:100% 100%;
}
 

這樣你會看到一個圖示，我們通過背景影象的形式指定了一張圖片，從而達到了圖示的效果

實際上，通過 background-image 指定的影象不僅可以是一張圖片，還可以是漸變 linear-gradient , 而且是可以指定多個影象的，所有影象已 Z 方向堆疊，並且先指定的影象會在後指定的影象上面。

所以如果我們在給背景影象再加上一個漸變色

background-image:url('icon.jpg'), linear-gradient(#f00, #f00);

結果並沒有變化，因為這裡第一個設定的是圖片，所以我們只看到圖片，漸變色被遮擋了，
background-blend-mode  這是用來定義背景圖片的混合方式，於是我們加上該樣式

background-image:url('icon.jpg'), linear-gradient(#f00, #f00);
background-blend-mode:lighten;

就變成了下面的效果

當然 background-blend-mode 還有其他的取值，可以挨著試試看效果。
上面我們用漸變色模擬了純色，如果是真的漸變色呢？

background-image:url('icon.png'), linear-gradient(#f00, #000);
background-blend-mode:multiply;