【前端開發】用css修改圖片的顏色教程

對於把圖標顏色改變，我接觸的只有css3里面的filter屬性，filter濾鏡中，有調整圖像的對比度的contrast(%)，有調整色調的hue-rotate等等，把這些濾鏡進行組合，進行色值變換，總會得到我們希望的顏色。

在這里，給大家推薦一個filter濾鏡進行轉換任意色的的在線工具。
生成css網站：https://www.zhangxinxu.com/sp/filter.html

則使用代碼如下：
html

<span id="weather-l"><img src="img/晴-天氣.png" class="background-1"></span>

css

.background-1 {
width: 100px;
height: 100px;
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
} 

即可得到想要的效果，通過之前的在線工具，可任意改變想要的顏色值

效果

修改之前

 

 修改之后