css改變圖片顏色的方法:1、使用【mix-blend-mode】方法進行取值;2、通過【background-blend-mode: lighten】這個混合模式實現(xiàn)改變圖片主體顏色黑色為其它顏色的目的。
本教程操作環(huán)境:windows7系統(tǒng)、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這個混合模式實現(xiàn)改變圖片主體顏色黑色為其它顏色的目的。簡單的 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中文網(wǎng)其它相關文章!
每個人都需要一臺速度更快、更穩(wěn)定的 PC。隨著時間的推移,垃圾文件、舊注冊表數(shù)據(jù)和不必要的后臺進程會占用資源并降低性能。幸運的是,許多工具可以讓 Windows 保持平穩(wěn)運行。
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號