如何使用內聯定義將 SVG 圖像直接嵌入到我的 CSS 中？

將內聯SVG 影像合併到CSS 中

CSS 提供了一種使用內聯定義將可擴展向量圖形(SVG)直接整合到其程式碼庫中的便捷方法。此技術允許開發人員嵌入 SVG 圖形作為背景圖像或其他設計元素。

用法

要在 CSS 中嵌入內嵌 SVG影像，請使用以下指令語法：

/* Class with inline SVG background image */
.my-class {
  background-image: url("data:image/svg+xml;utf8,
    <svg xmlns="http://www.w3.org/2000/svg" width="..." height="...">
      ...
    </svg>");
}

範例

考慮以下範例：

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

在此範例中，內聯SVG 定義建立彩色漸層覆蓋整個頁面的背景。內嵌 SVG 包含一個用於定義顏色漸層的 LinearGradient 和一個填滿漸層的矩形。

以上是如何使用內聯定義將 SVG 圖像直接嵌入到我的 CSS 中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！