CSS 給圖標填充是一種常見的技巧，可以幫助增強頁面視覺效果，讓圖標更加醒目。下面介紹一些 CSS 針對圖標填充的技巧。 ## 簡單的填充 最簡單的方法就是給元素應用樣式 `fill` 。如下例子，我們定義一個指向 `.icon` 類的樣式，然后應用 `fill` 屬性： ``` .icon { fill: blue; } ``` 這將導致所有指向 `.icon` 類的 SVG 圖標都填充為藍色。 ## 更加復雜的填充 如果想要更加靈活地控制填充的方式，比如只對單個元素進行填充，我們可以使用 `background-image` 屬性。對于想要創(chuàng)建填充的 SVG 的元素，我們需要添加以下代碼： ``` .icon { background-image: url("icon.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; } ``` 這將讓瀏覽器在 `.icon` 元素背景上顯示 SVG 文件。添加了 `background-size` 屬性后，SVG 圖標將被縮放到容器內(nèi)部。而 `background-repeat` 屬性則會使 SVG 制作多重背景時保持靜態(tài)。最后， `background-position` 屬性將使圖標垂直和水平居中。 ## 通過透明度創(chuàng)建填充 如果你想要創(chuàng)建一個透明的填充，可以使用 `opacity` 屬性。例如： ``` .icon { background-color: blue; opacity: .5; } ``` 這意味著圖標將被半透明填充為藍色。在不需要完全漸隱的情況下使用此方法會十分有用。 ## 使用 SVG 簡單路徑操作填充 如果你有一個更加復雜的形狀，需要多個單獨的填充來進行樣式設置，就可以使用 SVG 簡單路徑操作。這是一個較為復雜的 CSS 技巧，需要深入理解 SVG 路徑數(shù)據(jù)。以下代碼將顯示一個基礎的 SVG 圖像，并使用 `path` 元素標記其一部分： `````` 這將創(chuàng)建一個簡單的斜線圖標。接下來，我們需要將元素指向該圖標，再稍微調(diào)整一下樣式即可： ``` .icon { background-image: url(data:image/svg+xml;utf8,); background-size: contain; background-repeat: no-repeat; background-position: center; background-color: blue; } ``` 這樣就可以使 `.icon` 類背景上的圖標帶有藍色填充。這是原始圖標和通過代碼定義的樣式的對比圖：  ## 結(jié)論 這些方法只是在 CSS 中針對圖標填充的一些基本技巧。當然，還有很多其他的方式可以控制圖標的填充顏色、大小等。希望本文能對您熟悉 CSS 圖標填充提供幫助。