我可以使用 SVG 圖片作為 CSS 偽元素中的內容嗎？-css教學-PHP中文網

我可以使用 SVG 圖片作為 CSS 偽元素中的內容嗎？

Barbara Streisand

發布： 2024-12-08 09:51:11

原創

640 人瀏覽過

Can I Use SVG Images as Content in CSS Pseudo-elements?

在偽元素中將SVG 顯示為內容

在CSS 中，偽元素如::before 和::after 可以增強元素透過在其之前或之後添加內容來外觀。雖然文字內容很常見，但是否可以將 SVG 圖像顯示為這些偽元素中的內容？

要實現此目的，請將 SVG 圖像的 URL 指定為偽元素的內容值。例如：

#test::before {
  content: url(path/to/your.svg);
  width: 200px;
  height: 200px;
}

登入後複製

或者，您可以使用data:image/svg xml 語法將SVG 直接嵌入到CSS 中：

#test::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='50' r='40' stroke='black' stroke-width='2' fill='red'/%3E%3Cpolyline points='20,20 40,25 60,40 80,120 120,140 200,180'>

登入後複製

此技術允許您合併複雜的SVG使用CSS的強大功能將圖形添加到您的網頁中。

以上是我可以使用 SVG 圖片作為 CSS 偽元素中的內容嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！