欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css3實(shí)現(xiàn)背景圖片顏色修改的多種方式

  發(fā)布時(shí)間：2021-04-13 11:57:58   作者：前端一點(diǎn)紅   我要評(píng)論
這篇文章主要介紹了css3實(shí)現(xiàn)背景圖片顏色修改的多種方式,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

css3可以改變圖片的顏色了。從此再也不用設(shè)計(jì)出多張圖，而且隨時(shí)可以修改。下面就簡(jiǎn)單介紹下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>

說(shuō)明：

drop-shadow 濾鏡可以給元素或圖片非透明區(qū)域添加投影

將背景透明的 PNG 圖標(biāo)施加一個(gè)不帶模糊的投影，就等同于生成了另外一個(gè)顏色的圖標(biāo)

再通過(guò) overflow:hidden 和位移處理將原圖標(biāo)隱藏

mix-blend-mode 取值情況：【除了最后3個(gè)，大體和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; // 強(qiáng)光
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; // 默認(rèn)
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>

說(shuō)明：

lighten這個(gè)混合模式：變亮、變亮模式與變暗模式產(chǎn)生的效果相反，黑色比任何顏色都要暗，所以黑色會(huì)被任何色替換掉。反之，如果素材的底色是黑色，主色是白色。那就應(yīng)該用變暗（darken）的混合模式  。

linear-gradient(#f00,  #00f )還可以實(shí)現(xiàn)漸變顏色的效果哦。 

總結(jié)：

方式一局限于png格式的圖片，方式二不限制圖片的格式。

css3具有一定的兼容性。chrome、Firefo、移動(dòng)端較為適合使用。

到此這篇關(guān)于css3實(shí)現(xiàn)背景圖片顏色修改的多種方式的文章就介紹到這了,更多相關(guān)css3背景圖片顏色修改內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論