如何在背景圖片的 CSS 中嵌入內嵌 SVG 定義？

在 CSS 中嵌入內嵌 SVG 定義

CSS 的一個有趣的方面是能夠在樣式表中合併內嵌 SVG 定義。這項技術允許開發人員將 SVG 圖形直接嵌入到 CSS 程式碼中，用作背景圖片或其他視覺元素。

考慮以下範例，我們要使用SVG 建立簡單的線性漸變：

.my-class {
  background-image: <svg>...< /svg>;
}

為了實現此目的，我們需要在「background-image」屬性中定義SVG 漸變，例如so :

body {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'>
    <linearGradient>

透過使用'data:' URI 方案，我們可以將SVG 定義嵌入到CSS文件中，使其能夠渲染為背景圖像。結果將是動態漸變背景，可以使用“my-class”選擇器套用於任何元素。

以上是如何在背景圖片的 CSS 中嵌入內嵌 SVG 定義？的詳細內容。更多資訊請關注PHP中文網其他相關文章！