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

Question

我将绿色的 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。

Answer 1

这里有一些可能的解决方案。

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

绝对肯定 tech_bg.svg 位于它应该位于的目录中（img 文件夹）并且它的拼写与它在文本编辑器，包括区分大小写的文件名和文件扩展名。 GitHub 从字面上看，扩展名区分大小写，我在上传 SVG 文件时遇到了同样的问题（.svg 与 .SVG）。
增加 #aboutprocess 的 z-index，特别是如果您的文字确实消失了（我假设它仍然存在，只是白色，但请尝试突出显示它以确保).尝试附近的其他 CSS 值，例如不重复、左侧、顶部等。
清空浏览器缓存刷新一次试试，其他浏览器也试试。另外，如果碰巧您使用的是 IE8 及以下版本或 Android 2.3 及以下版本，那肯定是原因；他们不支持背景图像中的 SVG。

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

Answer 2

有时问题并不总是来自 css。请尝试将以下行添加到您的 .htaccess，以便服务器可以从您的 css 文件中识别 svg 文件（背景：url("../img/tech_bg.svg") 左上不重复；)，插入这一行：

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 文件的规则中。

有效，试试吧！ :)

Answer 3

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

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

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

Answer 4

如果 Web 服务器使用错误的“content-type”传输 SVG 文件，浏览器将不会显示它 header。

如果您的网络服务返回 application/octet-stream 或 text/xml，图像将无法正常工作，尽管 SVG 已正确传输并且 SVG 文件本身也没有问题。

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

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

Why doesn't my SVG background-image work?

html

css

svg

background-image