css 为什么我的SVG背景图像不工作？

piah890a 于 8个月前发布在其他

关注(0)|答案(5)|浏览(125)

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

的数据
我使用了一个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。
这里有一个Dropbox link to the SVG file。

css

来源：https://stackoverflow.com/questions/41023616/why-doesnt-my-svg-background-image-work

5条答案

按热度按时间

gwbalxhn1#

如果Web服务器使用错误的“content-type”标头传输SVG文件，则浏览器将不会显示SVG文件。
如果您的Web服务返回application/octet-stream或text/xml，则图像将无法正常工作，尽管SVG已正确传输且SVG文件本身正常。
SVG的正确媒体类型是image/svg+xml。

赞(0）回复(0）举报 8个月前

zed5wv102#

这里有几个潜在的解决方案。

重新审视你是如何创建SVG的。你使用的软件和生成方法（例如在Illustrator中）非常重要。有一个非常具体的方法可以正确地完成它。
这是OP的解决方案;详情请参见注解
确保tech_bg.svg在它应该在的目录（img文件夹）中，并且它的拼写与文本编辑器中的拼写完全相同，包括文件名和文件扩展名的大小写敏感性。GitHub当然从字面上理解扩展名大小写敏感性，我上传SVG文件时也遇到过同样的问题（.svg vs .SVG）。
增加#aboutprocess的z-index，特别是如果你的文本真的消失了（我假设它还在那里，只是白色，但尝试突出显示它以确保）。
尝试清除浏览器缓存并刷新一次，并尝试其他浏览器。此外，如果您碰巧使用IE8及以下版本或Android 2.3及以下版本，这肯定是原因;他们不支持背景图像中的SVG。

这是一个坚韧明确回答的问题，因为我们不能在你的本地机器上测试它，这是不一致的地方。

赞(0）回复(0）举报 8个月前

knpiaxh13#

有时问题并不总是来自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文件的规则。
好用，试试看！：）

赞(0）回复(0）举报 8个月前

4nkexdtk4#

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

字符串
不要放弃点和/ ->../不是背景->背景图像：不要忘记清除浏览器历史记录和现金

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

型

赞(0）回复(0）举报 8个月前

nwwlzxa75#

我的问题是SVG的颜色与背景的颜色相同，所以你看不到它。

赞(0）回复(0）举报 8个月前

我来回答

css 为什么我的SVG背景图像不工作？

5条答案

相关问题

热门标签

最新问答