为什么我的 SVG 背景图像不起作用？答案

【问题标题】：Why doesn't my SVG background-image work?为什么我的 SVG 背景图像不起作用？
【发布时间】：2017-04-22 18:14:09
【问题描述】：

我放置了一个绿色的 PNG 图像作为 div 的背景，它看起来像这样：

我使用 CSS hack 来将文本保留在绿色背景内。所以这是我该部分的代码：

#aboutprocess {
    background: url("../img/tech_bg.png") no-repeat left top;
    width: 100%;
    background-size: cover;
}
#aboutprocess .container {
    padding-top: 32.6316%;
    position: relative;
}
#aboutprocess .row {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
#aboutprocess p {
    color: #ffffff;
    text-align: center;
}

<section id="aboutprocess">
    <div class="container">
        <div class="row">
            <div class="col-md-8 ">
                <p class="text-center">Our agile team continuously delivers working software and empowers your organization to embrace changing requirements.</p>
                <button type="button" class="btn btn-link center-block white" role="link" type="submit" name="op" value="Link 2">about our process</button>
            </div>
            <!--end col-md-8 col-md-offset-2-->
        </div>
        <!--end row -->
    </div>
    <!--end container-->
</section>
<!--end aboutprocess-->

我想用 SVG 文件替换 PNG，我在 CSS 中唯一更改的是文件扩展名：

#aboutprocess {
    background: url("../img/tech_bg.svg") no-repeat left top;
    width: 100%;
    background-size: cover;
}

但是当我在浏览器中预览时，我再也看不到背景了：

我做错了什么？您可以看到带有PNG背景图像here的演示页面。

这是Dropbox link to the SVG file。

【问题讨论】：

您能否也发布您的 SVG 文件。
我用 Dropbox 链接更新了我的原始帖子。

标签： html css svg background-image

【解决方案1】：

这里有一些潜在的解决方案。

重新审视您创建 SVG 的方式。您使用的软件和生成它的方法（例如在 Illustrator 中）非常重要。有一种非常具体的正确方法。
_{这是 OP 的解决方案；具体见 cmets}

绝对肯定tech_bg.svg 位于应有的目录中（img 文件夹），并且拼写与文本编辑器中的拼写完全相同，包括文件名和文件的区分大小写延期。 GitHub 确实从字面上理解扩展名大小写敏感，并且出于同样的原因（.svg 与 .SVG），我在上传 SVG 文件时遇到了问题。
增加#aboutprocess 的z-index，特别是如果您的文字真的消失了（我假设它仍然存在，只是白色，但尝试突出显示它以确保）。也可以使用附近的其他 CSS 值，例如 no-repeat、left、top 等。
尝试清除浏览器缓存并刷新一次，然后尝试其他浏览器。此外，如果您碰巧使用的是 IE8 及更低版本或 Android 2.3 及更低版本，那肯定是原因；他们不支持背景图像中的 SVG。

这是一个很难明确回答的问题，因为我们无法在您的本地机器上与您一起测试它，这就是发生不一致的地方。

【讨论】：

我实际上将这个绿色背景从 Photoshop 导出为 svg。也许我应该改用 Illustrator？我突然想到这可能是问题所在，但为什么 Photoshop 的 svg 应该有所不同。或者是吗？我试试看。
Photoshop 在历史上一直是基于光栅的图形编辑器，无法生成真正的 SVG，而 Illustrator 是基于矢量的图形编辑器，专为生成真正的 SVG 而设计。
好的，我在 Illustrator 中尝试过同样的事情。没有运气。我今天制作了其他几个可以正常工作的 SVG 文件，所以不可能是我生成了这个错误。
OP：如果您将 PNG 拖入 Photoshop 并导出为 SVG，Photoshop 会给它一个 .SVG 扩展名，但您的照片几乎肯定会在导出时重新光栅化。因此，您添加了 .SVG 扩展名，而没有使您的文件成为实际运行的 SVG（SVG 的目的是使图像无限可缩放）。 Photoshop 不是为生成 SVG 而设计的——它只是为使用它们而设计的，因为它必须能够使用 Illustrator 文件。如果你想真正创建一个真正的 SVG，你必须使用 Illustrator 并使用 Live Trace 按钮。目前您使用的 SVG 没有任何好处。
你是对的。我又试了一次。我从 Photoshop 将背景图像导出为 PNG。我将它放在 Illustrator 中，使用 Image Trace 作为高保真照片并将其保存为 SVG。现在它工作正常。以前我没有使用过跟踪选项。所以谢谢！ :) 但它解决了另一个问题。跟踪质量不如应有的好。所以无论如何我应该坚持使用PNG。我只是不喜欢它留下的粗糙边缘，我认为 SVG 会提供更好的结果。

【解决方案2】：

有时问题并不总是来自 css。请尝试将以下行添加到您的 .htaccess，以便服务器可以从您的 css 文件中识别 svg 文件（background: url("../img/tech_bg.svg" ) no-repeat left top;)，插入这一行：

RewriteRule !\.(js|ico|gif|jpg|jpeg|svg|bmp|png|css|pdf|swf|mp3|mp4|3gp|flv|avi|rm|mpeg|wmv|xml|doc|docx|xls|xlsx|csv|ppt|pptx|zip|rar|mov)$ index.php

不需要像上面这么多规则，但取决于您希望在您的网站上拥有的格式需要什么，但对于您当前的问题，请确保有“svg" 在您的 .htaccess 文件的规则中。

有效，试试吧！ :)

【讨论】：

请在使用此解决方案之前检查浏览器的网络选项卡或调试控制台。如果您没有看到请求错误，那么这对您没有帮助。

【解决方案3】：

.pic {
    width: 20px;
    height: 20px;
    background-image: url("../img/tech_bg.svg");
    }

不要忘记点和 / ---> ../ 不是背景--->背景图像：并且不要忘记清除浏览器历史记录和现金

<div class="pic"></div>

【讨论】：

请看其他答案。

【解决方案4】：

如果网络服务器使用错误的“内容类型”标头传输 SVG 文件，浏览器将不会显示它。

如果您的 Web 服务返回 application/octet-stream 或 text/xml，则图像将无法正常工作，尽管 SVG 被正确传输并且 SVG 文件本身很好。

SVG 的正确媒体类型是image/svg+xml。

【讨论】：