css怎么改變圖片顏色

小編給大家分享一下css怎么改變圖片顏色，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

什么是css

css是一種用來表現HTML或XML等文件樣式的計算機語言，主要是用來設計網頁的樣式，使網頁更加美化。它也是一種定義樣式結構如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網頁或者單獨的樣式單文件中，而樣式規則的優先級由css根據這個層次結構決定，從而實現級聯效果，發展至今，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;
}

以上是“css怎么改變圖片顏色”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！