css3可以改變圖片的顏色了。從此再也不用設(shè)計出多張圖,而且隨時可以修改。下面就簡單介紹下css3中是如何做到改變背景圖片的顏色效果的。
方式一:利用css3濾鏡filter中的 drop-shadow
代碼如下:
<style> .icon{ display: inline-block; width: 180px; height: 180px; background: url('img/XXX.png') no-repeat center cover; overflow: hidden; } .icon:after{ content: ''; display: block; height: 100%; transform: translateX(-100%); background: inherit; filter: drop-shadow(144px 0 0 #fff); //需要修改的顏色值 } </style> <i class="icon"></i>
說明:
drop-shadow 濾鏡可以給元素或圖片非透明區(qū)域添加投影
將背景透明的 PNG 圖標施加一個不帶模糊的投影,就等同于生成了另外一個顏色的圖標
再通過 overflow:hidden 和位移處理將原圖標隱藏
mix-blend-mode 取值情況:【除了最后3個,大體和ps效果一樣】
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; // 還原
方式二:利用css3的mix-blend-mode 和 background-blend-mode
代碼如下:
<style> .icon{ display: inline-block; width: 180px; height: 180px; background-image: url($'img/XXX.png'), linear-gradient(#f00, #f00); background-blend-mode: lighten; background-size: cover; } </style> <i class="icon"></i>
說明:
lighten這個混合模式:變亮、變亮模式與變暗模式產(chǎn)生的效果相反,黑色比任何顏色都要暗,所以黑色會被任何色替換掉。反之,如果素材的底色是黑色,主色是白色。那就應(yīng)該用變暗(darken)的混合模式 。
linear-gradient(#f00, #00f )還可以實現(xiàn)漸變顏色的效果哦。
方式一局限于png格式的圖片,方式二不限制圖片的格式。
css3具有一定的兼容性。chrome、Firefo、移動端較為適合使用。
到此這篇關(guān)于css3實現(xiàn)背景圖片顏色修改的多種方式的文章就介紹到這了,更多相關(guān)css3背景圖片顏色修改內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
標簽:赤峰 泰州 林芝 萍鄉(xiāng) 延邊 大同 保定
巨人網(wǎng)絡(luò)通訊聲明:本文標題《css3實現(xiàn)背景圖片顏色修改的多種方式》,本文關(guān)鍵詞 ;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。上一篇:CSS3 制作的懸??s放特效