技術標籤：css

利用css修改圖示顏色

最近在寫一個關於天氣的小功能，發現一件有意思的事，我找到的圖示顏色是黑色，所以使用之後效果例圖如下：

但我想要的效果是這樣的：

對於把圖示顏色改變，我接觸的只有css3裡面的filter屬性，filter濾鏡中，有調整影象的對比度的contrast(%)，有調整色調的hue-rotate等等，把這些濾鏡進行組合，進行色值變換，總會得到我們希望的顏色。
在這裡，給大家推薦一個filter濾鏡進行轉換任意色的的線上工具。
點選這裡進行跳轉
則使用程式碼如下：
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%);
}

即可得到想要的效果，通過之前的線上工具，可任意改變想要的顏色值
以上所述，均參考自張鑫旭大佬的部落格，連結如下
點選這裡進行跳轉
弱弱菜雞，不知所言