css如何改變圖片顏色

css改變圖片顏色的方法：1、使用【mix-blend-mode】方法進行取值；2、透過【background-blend-mode: lighten】這個混合模式實現改變圖片主體顏色黑色為其它顏色的目的。

本教學操作環境：windows7系統、css3版，DELL G3電腦。

css改變圖片顏色的方法：

1、首先我們來了解mix-blend-mode 取值情況

mix -blend-mode: normal; // 正常

##mix-blend-mode: multiply; // 正片疊底

mix-blend-mode: screen; // 濾色

mix-blend-mode: overlay; // 疊加

mix-blend-mode: darken; // 變暗

mix-blend-mode: lighten; // 變亮

mix-blend-mode: color-dodge; // 顏色減淡

#mix-blend-mode: color-burn; // 顏色加深

mix-blend -mode: hard-light; // 強光

mix-blend-mode: soft-light; // 柔光

mix-blend-mode: difference; // 差值

mix-blend-mode: exclusion; // 排除

mix-blend-mode: hue; // 色相

mix-blend-mode: saturation; // 飽和度

mix-blend-mode: color; // 色彩

mix-blend-mode: luminosity; // 亮度

mix-blend-mode: initial; / / 預設

mix-blend-mode: inherit; // 繼承

#mix-blend-mode: unset; // 還原

這些大致和ps中一致，除了最後三個

2、利用background-blend-mode，我們可以在圖片下疊加多一層其他顏色，透過background-blend-mode: lighten這個混合模式實現改變圖片主體顏色黑色為其它顏色的目的。簡單的 CSS 程式碼示意如下：

.pic {
width: 200px;
height: 200px;
background-image: url($img);
background-size: cover;
}
.pic1 {
background-image: url($img), linear-gradient(#f00, #f00);
background-blend-mode: lighten;
background-size: cover;
}

相關免費學習推薦：

javascript影片教學

#

以上是css如何改變圖片顏色的詳細內容。更多資訊請關注PHP中文網其他相關文章！