twitter-bootstrap Bootstrap - 背景图像不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14335032/
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
Bootstrap - Background image not working
提问by Gattoo
My CSS markup:
我的 CSS 标记：
.rowbgi {
background-image:url('img/gradient.png');
background-color:#cccccc;
}
My HTML markup:
我的 HTML 标记：
<div class="span4 rowbgi">
<img class="img-circle" data-src="holder.js/140x140">
<h2>Heading</h2>
<p>Stack Overflow</p>
<p><a class="btn" href="#">View details </a></p>
</div><!-- /.span4 -->
I am not able to see the background image, but the color is seen in the background. The image is available in the path.
我看不到背景图像，但可以在背景中看到颜色。图像在路径中可用。
Can somebody tell me some silly mistake I am doing?
有人可以告诉我我正在做的一些愚蠢的错误吗？
回答by Marcin Skórzewski
Nobody knows what you are doing, because you did not show it (eg. with jsfiddle ;P), but my first guess is that you have following file structure:
没有人知道你在做什么，因为你没有展示它（例如用 jsfiddle ;P），但我的第一个猜测是你有以下文件结构：
- HTML file in root directory:
/index.html, - CSS file in css directory:
/css/style.css, - images in
/img/gradient.png.
- 根目录下的 HTML 文件：
/index.html, - css 目录中的 CSS 文件：
/css/style.css, - 中的图像
/img/gradient.png。
Now, mind that all the files linked from HTML/CSS have paths relative to them. So, if you keep CSS in /css, then the path in CSS img/xxxlinks to /css/img/xxx. If I am guessing correctly and this is your case change the style to:
现在，请注意从 HTML/CSS 链接的所有文件都有相对于它们的路径。因此，如果您将 CSS 保留在 中/css，则CSS 中的路径会img/xxx链接到/css/img/xxx. 如果我猜对了，这是您的情况，请将样式更改为：
background-image:url(/img/gradient.png);
or
或者
background-image:url(../img/gradient.png);
回答by Frank
I also tried using the image path format, but the image wasn't showing up at all.
我也尝试使用图像路径格式，但图像根本没有显示。
But when I uploaded the image to my server, and I'm assuming this would work with any image hosting platform, like Imgur, and used the full path, it worked.
但是当我将图像上传到我的服务器时，我假设这适用于任何图像托管平台，如 Imgur，并使用完整路径，它工作。
So, instead of using:
所以，而不是使用：
background-image: url('img/gradient.png');
Do:
做：
background-image: url('https://example.com/img/gradient.png');
Hopefully, this helps someone!
希望这对某人有所帮助！
回答by Stephen Lindsey
To use CSS to load the image, you will have to save the image file inside your CSS folder (if using an external style sheet). If you use the url image.jpgfor example, CSS is looking for that file inside the CSS folder. Your CSS markup is telling CSS that there is a sub-folder called imginside your CSS folder, which probably isn't the case.
要使用 CSS 加载图像，您必须将图像文件保存在 CSS 文件夹中（如果使用外部样式表）。image.jpg例如，如果您使用 url ，CSS 将在 CSS 文件夹中查找该文件。您的 CSS 标记告诉 CSS，img您的 CSS 文件夹中有一个名为的子文件夹，这可能并非如此。
