为什么我的 SVG 背景图像不起作用? [英] Why doesn't my SVG background-image work?

问题描述

我将一个绿色的 PNG 图片作为 div 的背景，它看起来像这样:

我使用了 CSS hack 来将文本保留在绿色背景中.所以这是我在该部分的代码:

#aboutprocess {背景: url("../img/tech_bg.png") 无重复左上角；宽度:100%；背景尺寸:封面；}#aboutprocess .container {填充顶部:32.6316%；位置:相对；}#aboutprocess .row {位置:绝对；顶部:0；左:0；右:0；底部:0；显示:-webkit-box；显示:-ms-flexbox;显示:弹性；-webkit-box-align:居中；-ms-flex-align:居中；对齐项目:居中；-webkit-box-pack: 中心；-ms-flex-pack:居中；对齐内容:居中；}#aboutprocess p {颜色:#ffffff；文本对齐:居中；}

<div class="container"><div class="row"><div class="col-md-8"><p class="text-center">我们的敏捷团队不断交付可工作的软件，并使您的组织能够接受不断变化的需求.</p><按钮类型=按钮";class=btn btn-link 中心块白色"角色=链接"类型=提交"名称=操作"；value=Link 2">关于我们的流程</button>

<!--end col-md-8 col-md-offset-2-->

<!--结束行-->

<!--结束容器--></节><!--结束关于进程-->

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

#aboutprocess {背景: url("../img/tech_bg.svg") 无重复左上角；宽度:100%；背景尺寸:封面；}

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

我做错了什么?您可以在此处查看带有 PNG 背景图片的演示页面.

这是一个 SVG 文件的 Dropbox 链接.

解决方案

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

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

• 绝对肯定 tech_bg.svg 位于它应该位于的目录中(img 文件夹)并且它的拼写与它在文本编辑器中，包括文件名和文件扩展名的区分大小写.GitHub 确实从字面上理解了扩展名区分大小写，出于同样的原因(.svg 与 .SVG)，我在上传 SVG 文件时遇到了问题.

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

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

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

I placed a green PNG image as background to a div and it looks like this:

I used a CSS hack in order to keep the text inside the green background. So this is my code for that section:

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

I want to replace the PNG with an SVG file, and the only thing that I changed in the CSS is the file extension:

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

But when I preview this in browser, I can't see the background anymore:

What am I doing wrong? You can see the demo page with the PNG background image here.

Here's a Dropbox link to the SVG file.

解决方案

There are a few potential solutions here.

• Revisit how you created the SVG. The software you use and the method you generate it with (e.g. in Illustrator) matter greatly. There's a pretty specific way of doing it correctly.
  _{This was the solution for OP; see comments for specifics}

• Making absolutely positively sure that tech_bg.svg is in the directory that it's supposed to be (the img folder) and that it's spelled exactly the same as it is in the text editor, including case sensitivity of the filename and file extension. GitHub certainly takes extension case sensitivity literally and I've had problems uploading SVG files for that same reason (.svg vs .SVG).

• Increasing the z-index of #aboutprocess, particularly if your text really has disappeared (I'm assuming it's still there, just white, but try highlighting it to make sure). Play around with the other CSS values nearby like no-repeat, left, top, etc, too.

• Try clearing your browser cache and refreshing once, and try other browsers too. Also, if by some chance you happen to be using IE8 and below or Android 2.3 and below, that would definitely be the cause; they don't support SVGs in background-images.

It's a tough question to answer definitively since we can't be there testing it with you on your local machine, which is where the inconsistency is happening.

这篇关于为什么我的 SVG 背景图像不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！