twitter-bootstrap SVG 背景图像未显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41023616/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SVG background image not showing
提问by bijoume
I have placed a green png image as background to a div and it looks like this:
我已经将一个绿色的 png 图像作为 div 的背景，它看起来像这样：
I have used a CSS hack in order to keep the text inside the green background. So this is my HTML for that section:
我使用了 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-->
And this is the CSS:
这是 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;
}
Now, I want to replace the png with the svg file and the only thing that I changed in the CSS is the file extension:
现在，我想用 svg 文件替换 png，我在 CSS 中唯一更改的是文件扩展名：
#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 any more:
但是当我在浏览器中预览时，我再也看不到背景了：
What am I doing wrong? You can see the demo page with the png background image here.
我究竟做错了什么？您可以在此处查看带有 png 背景图像的演示页面。
Thank you for your help.
谢谢您的帮助。
EDIT:Here'a Dropbox link to the SVG file.
采纳答案by Kyle Vassella
You probably already did, but I suggest making absolutely positively sure that tech_bg.svg is in the directory that it's supposed to be (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).
您可能已经这样做了，但我建议绝对肯定 tech_bg.svg 位于它应该位于的目录（img 文件夹）中，并且它的拼写与文本编辑器中的完全相同，包括文件名的大小写敏感度和文件扩展名。GitHub 确实从字面上理解了扩展名区分大小写，出于同样的原因（.svg 与 .SVG），我在上传 SVG 文件时遇到了问题。
This was the solution for OP, see comments for specifics:Next question I'll ask is how did you make the SVG? What software did you use and are you sure you generated it correctly in Illustrator? There's a pretty specific way of doing it.
这是 OP 的解决方案，具体请参见评论：我要问的下一个问题是你是如何制作 SVG 的？您使用的是什么软件，您确定在 Illustrator 中正确生成了它？有一种非常具体的方法。
The only other thing that came to mind was increasing the z-indexof #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.
唯一想到的另一件事是增加z-indexof #aboutprocess，特别是如果您的文本真的消失了（我假设它仍然存在，只是白色，但尝试突出显示它以确保）。也可以使用附近的其他 CSS 值，例如 no-repeat、left、top 等。
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.
尝试清除浏览器缓存并刷新一次，并尝试其他浏览器。此外，如果您碰巧使用 IE8 及以下或 Android 2.3 及以下，那肯定是原因。
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.
这是一个很难明确回答的问题，因为我们无法在您的本地机器上与您一起测试它，而这正是发生不一致的地方。
回答by Felype
I know this question is old and solved, but should anyone else have this particular issue (and this question is well placed on Google): Browsers will NOT display svg if the webserver transfers it with wrong "content-type" header. If your webservice is returning "application/octet-stream" or "text/xml", the image will not work properly, in spite of being transfered correctly and the SVG file itself being fine.
我知道这个问题很老而且已经解决了，但是如果其他人有这个特殊问题（这个问题在谷歌上很合适）：如果网络服务器使用错误的“内容类型”标头传输它，浏览器将不会显示 svg。如果您的网络服务返回“application/octet-stream”或“text/xml”，则图像将无法正常工作，尽管传输正确且 SVG 文件本身没有问题。
The correct mediatype for SVG is image/svg+xml
SVG 的正确媒体类型是 image/svg+xml
回答by Raymond
Sometimes the problem is not always came from the css. Please have a try to add the following line to your .htaccess, so the server can recognize svg files from your css file (background: url("../img/tech_bg.svg") no-repeat left top;), Insert this line:
有时问题并不总是来自 css。请尝试将以下行添加到您的.htaccess 中，以便服务器可以从您的 css 文件中识别 svg 文件（背景： 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
No need to have so many rules as above but depends on what you need for the format you would like to have on your site, but for your current question here, please make sure there is "svg" in the rule of your .htaccess file.
不需要有这么多规则，但取决于您希望在您的网站上拥有的格式，但对于您当前的问题，请确保您的 .htaccess 文件的规则中有“ svg” .
It works, try it! :)
它有效，试试吧！:)
回答by kamran abbasov
.pic {
width: 20px;
height: 20px;
background-image: url("../img/tech_bg.svg");
}
dont foreget dots and / ---> ../ not background ---> background-image: and dont forget clear browser history and cash
不要忘记点和 / ---> ../ 不是背景 ---> 背景图像：不要忘记清除浏览器历史记录和现金
<div class="pic"></div>
