顯示有誤

公告

CSS 黑魔法-css控制圖標顏色

背景

實際項目中，一般會遇到選中狀態和非選中狀態用不同顏色的圖標去標識，例如導航欄圖標的不同狀態

我們通常的做法是

1.讓UI給出不同顏色的圖標，在不同狀態下設置不同的元素背景例如：

.icon{
  background-image:url(未選中狀態圖標本地路徑)  
}
.icon.active{
  background-image:url(選中狀態圖標本地路徑)  
}

缺點：當狀態改變后，瀏覽器才去拉取active狀態的圖片，所以視覺上會有閃動，體驗不好

2.將兩張圖標合成雪碧圖，通過background-position去取不同狀態下的圖標，例如：

.icon {
    background-image: url(./sprite.png);
    background-position: 0 0;
}

.icon.active {
    background-image: url(./home-active.png);
    background-position: -20px -20px;
}

優點：解決第一個方法閃動的問題
缺點：1. 合成雪碧圖需要工作量；2.多了個圖標，增加雪碧圖的體積

黑魔法做法

1.CSS3投影---filter:drop-shadow(color, X-offset, Y-offset)

color：投影的顏色

X-offset： X軸偏移量

Y-offset：Y軸偏移量

drop-shadow：就好像光線照在元素上一樣，元素里不透明的地方，光線無法穿透形成投影

<span class="icon-del"></span>

.icon-del {
    background: url(../images/delete.png) no-repeat center;
    width: 20px;
    height: 20px;
    display: inline-block;
    -webkit-filter: drop-shadow(red 20px 0);
    filter: drop-shadow(red 20px 0);
}

結果:

我們可以看到在原圖標的右側，出現紅色的投影。現在需要做的是把原來圖標隱藏起來

<span class="icon-wrapper">
    <span class="icon-del"></span>
</span>

.icon-wrapper {
    display: inline-block;
    width: 20px;
    height: 20px;
    overflow: hidden;
    position: relative;
}
.icon-del {
    background: url(../images/delete.png) no-repeat center;
    width: 100%;
    height: 100%;
    position: absolute;
    left: -20px;
    display: inline-block;
    border-right: 20px solid transparent;
    -webkit-filter: drop-shadow(red 20px 0);
    filter: drop-shadow(red 20px 0);
}

結果:

優點：不需要額外的圖標
缺點：需要兩層DOM結構

2.background-blend-mode: 背景混合模式

<span class="icon-gear"></span>

.icon-gear {
    background-image: url(../images/gear.png);
    background-color: red;
    background-size: cover;
    width: 64px;
    height: 64px;
    display: inline-block;
    background-blend-mode: lighten;
}

圖標（注意要求是黑色的圖標）設置圖片背景和顏色背景，然后按照lighten模式混合

優點：寫法簡潔
缺點：兼容性不好

結果:

posted on 2021-02-04 15:42 顯示有誤閱讀(187) 評論(0) 收藏舉報

刷新頁面返回頂部