是否可以在 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 两次 - 上帝！

我试过 Google，它有关于 <use xlink=""/> 的信息，但那是如果你想在 HTML 正文中重复使用 svg，似乎没有内联 SVG 以便在 style.css 中重用的方法，或者有吗？

感谢 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/--*

Property names that are prefixed with --, like --example-name, represent custom properties that contain a value that can be used in other declarations using the var() function.

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

The var() CSS function can be used to insert the value of a custom property (sometimes called a "CSS variable") instead of any part of a value of another property.

背景示例：

html {
  --svg: url(https://upload.wikimedia.org/wikipedia/commons/d/db/Green_circle.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>

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

Is it possible to Inline an SVG in style.css for reuse, multiple times, as a background-image?

css

svg

lazy-loading