是否可以在 style.css 中内联 SVG 以作为背景图像多次重复使用？

Question

我网站的许多页面的页脚本质上是 3 个按钮。 在

style.css

中，我用背景 svg 为它们设置了样式。 这是有问题的，因为我在顶部有多个图像被

class="lazyload"

使用

<script src="../lazysizes.min.js" async=""></script>

暂停，因此浏览器现在优先加载最底部的 3 个不重要的 SVG 图像。

.button {
    background-repeat: no-repeat;background-position: center;background-size: contain}

.button{background-image:url("icon-values/gem.svg"), linear-gradient(to bottom right, silver, darkgrey)}
.button:hover {background-image:url("icon-values/gem.svg"), linear-gradient(to bottom right, #648DA2, #215c7a)}

我想在

style.css

中内联 svg 代码，但是你可以看到我使用每个 svg 两次，我再次将它用于

button:hover

状态。 我不想用重复的 svg 代码来膨胀我的 styles.css 。 此外，我读到 svgs 没有缓存，因此每当用户进入新页面时，它都会再次加载它们，如果用户在任何页面上

hovers

，它甚至可能加载 svgs 两次 - 天哪！

我试过谷歌，它有关于

<use xlink=""/>

的信息，但是如果你想在 HTML 正文中重用 svg，似乎没有办法在 style.css 中内联 SVG 以便重用，或者有吗？

感谢 G-Cyrillus 对 css 变量的评论，我使用了这个：

.buttonLeft{
background-repeat: no-repeat;background-position: center;background-size: contain;
--gem: url("data:image/svg+xml;base64,.....BLOB....");
background-image:var(--gem), linear-gradient(to bottom right, silver, darkgrey)}

.buttonLeft:hover {background-image:var(--gem), linear-gradient(to bottom right, #648DA2, #215c7a)}

它会在悬停时切换按钮上的背景渐变，但不会使用悬停状态的其他背景图像来使 CSS 膨胀。 完美！

Answer 1

（来自之前的评论）

您可以使用css

var()

功能来避免重复相同的值并缩短代码。

https://developer.mozilla.org/en-US/docs/Web/CSS/--*

以 -- 为前缀的属性名称，如 --example-name，表示包含可在使用 var() 函数的其他声明中使用的值的自定义属性。

https://developer.mozilla.org/en-US/docs/Web/CSS/var()

var() CSS 函数可用于插入自定义属性的值（有时称为“CSS 变量”），而不是另一个属性值的任何部分。

背景示例：svg 位于 www 。 svgrepo 。 com

html {
  --svg: url(https://www.svgrepo.com/show/530401/table-of-contents.svg) no-repeat center;
  background: var(--svg) / 50%;
  filter : drop-shadow(0 0 5px);
}

body {
  margin: 0;
  height: 100vh;
  background: var(--svg) / 25%;
}

p {
  background: var(--svg) / 60%; 
  padding: 6em 3em;
  width:max-content
}

<p>
  some more bg here
</p>
<p style="background-color:silver;color:white">
  Any SVG will do.
</p>