純css實(shí)現(xiàn)更改圖片顏色的技巧

發(fā)布時(shí)間：2019-07-03 15:14:59 作者：佚名

這篇文章主要介紹了純css實(shí)現(xiàn)更改圖片顏色的技巧，實(shí)現(xiàn)方法很簡(jiǎn)單，感興趣的朋友跟隨小編一起看看吧

css更改圖片顏色的技巧，代碼很簡(jiǎn)單，具體代碼如下所示：

tips： JPG、PNG、GIF 都可以，但是有一個(gè)前提要求，就是黑色純色，背景白色

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

總結(jié)

以上所述是小編給大家介紹的純css實(shí)現(xiàn)更改圖片顏色的技巧 ,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

Tag：css 更改圖片顏色

相關(guān)文章

實(shí)現(xiàn)帶CSS混合模式的JS視覺(jué)差輪播圖特效
這是一款實(shí)現(xiàn)帶CSS混合模式的JS視覺(jué)差輪播圖特效，使用CSS mix-blend-mode將文字和圖片背景進(jìn)行混合，在點(diǎn)擊時(shí)帶有炫酷的視覺(jué)差特效
2019-04-15
jQuery基于CSS3混合模式的輪播圖特效
這是一個(gè)基于CSS3混合模式的jquery輪播圖特效代碼，使用mix-blend-mode來(lái)制作混合圖片特效，制作出非常炫酷的多圖層動(dòng)畫(huà)效果
2018-12-12
CSS3混合模式mix-blend-mode/background-blend-mode簡(jiǎn)介
這篇文章主要介紹了CSS3混合模式mix-blend-mode/background-blend-mode簡(jiǎn)介,需要的朋友可以參考下
2018-03-15
css3 svg仿微信加載框代碼
css3 svg仿微信加載框代碼是一款可自定義進(jìn)度條顏色的仿微信網(wǎng)頁(yè)居中的加載框動(dòng)畫(huà)特效。需要的朋友前來(lái)下載使用
2019-08-22
使用CSS混合模式和SVG來(lái)動(dòng)態(tài)更改產(chǎn)品圖片的顏色
這篇文章主要介紹了使用CSS混合模式和SVG來(lái)動(dòng)態(tài)更改產(chǎn)品圖片的顏色,需要的朋友可以參考下
2019-09-05