css改變圖片顏色的方法:1、使用【mix-blend-mode】方法進行取值;2、透過【background-blend-mode: lighten】這個混合模式實現改變圖片主體顏色黑色為其它顏色的目的。
本教學操作環境:windows7系統、css3版,DELL G3電腦。
css改變圖片顏色的方法:
1、首先我們來了解mix-blend-mode 取值情況
這些大致和ps中一致,除了最後三個2、利用background-blend-mode,我們可以在圖片下疊加多一層其他顏色,透過background-blend-mode: lighten這個混合模式實現改變圖片主體顏色黑色為其它顏色的目的。簡單的 CSS 程式碼示意如下: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; // 還原
.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如何改變圖片顏色的詳細內容。更多資訊請關注PHP中文網其他相關文章!