SVG背景图像没有显示

Question

我已经将绿色png图像作为div的背景放置,它看起来像这样:

我使用了CSS hack来保持文本在绿色背景中.所以这是我对该部分的HTML:

<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-->

这是CSS:

#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;
    }

现在,我想用svg文件替换png,我在CSS中唯一改变的是文件扩展名:

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

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

我究竟做错了什么？您可以在此处看到带有png背景图像的演示页面.

谢谢您的帮助.

编辑: Here'a Dropbox链接到SVG文件.

Answer 1

我知道这个问题很老并且已经解决了，但是如果其他人有这个特殊问题（并且这个问题很好地放在 Google 上）：如果网络服务器使用错误的“内容类型”标头传输它，浏览器将不会显示 svg。如果您的网络服务返回“application/octet-stream”或“text/xml”，则图像将无法正常工作，尽管传输正确且 SVG 文件本身没有问题。

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

Answer 2

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

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

• 绝对肯定地确保该文件tech_bg.svg位于其应有的目录（img文件夹）中，并且其拼写与文本编辑器中的拼写完全相同，包括文件名和文件扩展名的区分大小写。GitHub 当然从字面上理解扩展名大小写敏感，并且出于同样的原因（.svg 与 .SVG），我在上传 SVG 文件时遇到了问题。

• 增加z-index的#aboutprocess，特别是如果您的文本确实消失了（我假设它仍然存在，只是白色，但尝试突出显示它以确保）。也可以尝试一下附近的其他 CSS 值，例如 no-repeat、left、top 等。

• 尝试清除浏览器缓存并刷新一次，也可以尝试其他浏览器。另外，如果你碰巧使用的是 IE8 及以下版本或 Android 2.3 及以下版本，这肯定是原因；他们不支持背景图像中的 SVG。

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