亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
首頁 > web前端 > css教程 > 正文

css如何改變圖片顏色

coldplay.xixi
發(fā)布: 2021-04-30 16:46:04
原創(chuàng)
10150人瀏覽過
css改變圖片顏色的方法:1、使用【mix-blend-mode】方法進行取值;2、通過【background-blend-mode: lighten】這個混合模式實現(xiàn)改變圖片主體顏色黑色為其它顏色的目的。

css如何改變圖片顏色

本教程操作環(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; // 柔光

圖改改
圖改改

在線修改圖片文字

圖改改455
查看詳情 圖改改

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)其它相關文章!

最佳 Windows 性能的頂級免費優(yōu)化軟件
最佳 Windows 性能的頂級免費優(yōu)化軟件

每個人都需要一臺速度更快、更穩(wěn)定的 PC。隨著時間的推移,垃圾文件、舊注冊表數(shù)據(jù)和不必要的后臺進程會占用資源并降低性能。幸運的是,許多工具可以讓 Windows 保持平穩(wěn)運行。

下載
來源:php中文網(wǎng)
本文內容由網(wǎng)友自發(fā)貢獻,版權歸原作者所有,本站不承擔相應法律責任。如您發(fā)現(xiàn)有涉嫌抄襲侵權的內容,請聯(lián)系admin@php.cn
作者最新文章
最新問題
開源免費商場系統(tǒng)廣告
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
關于我們 免責申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng):公益在線php培訓,幫助PHP學習者快速成長!
關注服務號 技術交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學習
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號