时间戳

首页 > 解决方案 > css 中的 SVG Sprite 声明的背景图像

html - css 中的 SVG Sprite 声明的背景图像

问题描述

我有一个包含多个图像的 SVG 精灵文件。出于测试目的，我将其缩小到单个图像。

当我将图像声明为 html 正文中的实例并引用 sprite 文件中的图像 id 时，图像会正确显示。这是我对 sprite 文件的正确性和可用性的测试。

当我在 css 部分中将相同的 url 声明为背景图像时 - 它失败了。当我引用另一个 svg 文件（此处注释掉）时，该文件不是作为精灵的图像 - 它运行良好并产生图像中显示的结果。这是我对 css 声明正确性的测试。

我在这里错过了什么？为什么它不起作用？

我已经在 Codepen 中看到了很多这样的例子。谢谢。

我在 css 中测试了有无 viewBox 声明。没有效果。

这是从非精灵 svg 文件中出来的背景的样子。

在此处输入图像描述

我省略了 svg sprite 文件的内容，因为它运行良好。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
 .footer-bg{
    position: relative;
    background-color: #eaeaea;
}
.footer-bg::before{
    position: absolute;
    content: "";
    top: 0; left: 0;
    width: 100%; height: 100%;
    /* background: url(http://94.237.96.98/static/media/images/decor/be-lotus-2.svg) no-repeat; */
    background: url(http://94.237.96.98/static/media/images/svg/be-decor-sprite_sm.svg#be-lotus-2) no-repeat;
    background-size: contain;
    background-position: center;
    filter: saturate(0%) opacity(25%) drop-shadow(10px 10px 20px #F5D6BF);
    -webkit-filter: saturate(0%) opacity(25%) drop-shadow(10px 10px 20px #F5D6BF);
    -moz-filter: saturate(0%) opacity(25%) drop-shadow(10px 10px 20px #F5D6BF);
}
</style>
</head>
<body>
<svg class="sprite" role="img" ><use xlink:href="http://94.237.96.98/static/media/images/svg/be-decor-sprite_sm.svg#be-lotus-2" /></use></svg>

<div class="footer-bg">
<h1>This is my church</h1>
<h2>This is where I heal my hurts</h2>
    <h3>For Tonight....</h3>
    <h3>God... Is a DJ</h3>
</div>
</body>
</html>

这是 SVG 文件：

标签： htmlcsssvgbackgroundsvg-sprite

解决方案

推荐阅读