使用CSS3新特性

1. 使用CSS的tint屬性（實(shí)驗(yàn)性）

在一些支持該屬性的瀏覽器中，你可以使用-webkit-mask-box-image的tint色值來給圖標(biāo)上色。這是一個(gè)實(shí)驗(yàn)性的CSS3特性。

.icon {
  -webkit-mask: url('path/to/icon.png') no-repeat;
  -webkit-mask-size: 100%;
  -webkit-mask-box-image: tint(#ff0000); /* 將圖標(biāo)顏色變?yōu)榧t色 */
}

2. 使用SVG作為輪廓并填充顏色（利用CSS3的mask屬性）

對于簡單的圖標(biāo)輪廓，可以使用SVG，并通過CSS3的mask屬性應(yīng)用PNG圖標(biāo)作為蒙版。這樣可以通過改變SVG的顏色來改變圖標(biāo)顏色。

.icon {
  width: 100px;
  height: 100px;
  -webkit-mask-image: url('path/to/icon.png');
  mask-image: url('path/to/icon.png');
  background-color: red; /* 設(shè)置你需要的顏色 */
}

3. 使用CSS濾鏡效果

CSS3引入了濾鏡效果，雖然不能直接改變圖標(biāo)的顏色，但可以創(chuàng)建各種視覺效果，從而間接改變圖標(biāo)的外觀。

.icon {
  filter: brightness(0) saturate(100%) invert(30%) sepia(100%) saturate(500%) hue-rotate(180deg);
}

請注意，這些分類是基于技術(shù)特性和瀏覽器支持情況。隨著時(shí)間的推移，一些CSS3特性可能會變得更加廣泛支持，從而遷移到兼容性方案類別中。

作者：慕仲卿

鏈接：https://juejin.cn/post/7360612648043266088

來源：稀土掘金

著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。