如何使用內聯定義將 SVG 圖像直接嵌入到我的 CSS 中？-css教學-PHP中文網

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

Patricia Arquette

發布： 2024-12-09 20:52:10

原創

829 人瀏覽過

How Can I Embed SVG Images Directly into My CSS Using Inline Definitions?

將內聯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>

登入後複製

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

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