twitter-bootstrap 大屏幕背景图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25984815/
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
Jumbotron Background Image
提问by Luis Valdez
I've tried everything and searched everywhere. But nothing seems to work. It's such an easy problem to solve I think, I'm just not getting there alone.
我已经尝试了一切并到处搜索。但似乎没有任何效果。我认为这是一个很容易解决的问题，我只是没有一个人去那里。
I want to set a background image on my jumbotron, since I'm using bootstrap.
我想在我的大屏幕上设置背景图像，因为我使用的是引导程序。
Here is what I did.
这是我所做的。
<div class="jumbotron center " > <!-- start jumbotron -->
<div class="container">
<div class="jb-text">
<h1>This is an epic service</h1>
<h3>Not really, just trying this thing out</h3>
</div>
<button class="btn btn-default" id="btn-custom"><a href="#">Start Your <strong>Free</strong> Trial</a></button>
</div> <!-- end container -->
</div> <!-- end jumbotron -->
And this is the CSS
这是 CSS
.jumbotron{
background-image: url('image/green-forest.jpg') no-repeat center center;
}
Unfortunately nothing happens.
不幸的是什么也没有发生。
回答by emmanuel
The problem is that you have used background-imageinstead of backgroundproperty.
问题是您使用了background-image而不是background属性。
回答by Erik Gaasedelen
I was just having the same problem. Since my css file was contained within a stylesheets folder, and I stored images in a different folder, I had to change it to:
我只是遇到了同样的问题。由于我的 css 文件包含在 stylesheets 文件夹中，并且我将图像存储在不同的文件夹中，因此我必须将其更改为：
.jumbotron{
background-image: url('../image/green-forest.jpg') no-repeat center center;
}
This is because your url is relative to the location of your css file, not your HTML file.
这是因为您的 url 是相对于您的 css 文件的位置，而不是您的 HTML 文件。
回答by SAM96
.jumbotron{
background-image: url(../image/green-forest.jpg); }
Please try this code for setting your image to the Jumbotron class.
请尝试使用此代码将图像设置为 Jumbotron 类。
回答by aahoogendoorn
It's likely a combination of two things:
这很可能是两件事的结合：
- First, you have specified the
background-imageattribute. This would be fine if you hadn't added the other properties as well. So you should have rather used thebackgroundattribute here - as in the previous answer. - Next, whether or not your
jumbotronstyle actually applies also depends on the other in which you load the CSS files in your page. If you load your CSS file beforethe Bootstrap CSS, then the styles from the Bootstrap CSS file will probably override your style. In this case, your styles will not apply. So you should load you specific CSS file afterthe Bootstrap CSS file is loaded.
- 首先，您已经指定了
background-image属性。如果您还没有添加其他属性，这会很好。所以你应该在background这里使用属性 - 就像在上一个答案中一样。 - 接下来，您的
jumbotron样式是否实际适用还取决于您在页面中加载 CSS 文件的另一个位置。如果在 Bootstrap CSS之前加载 CSS 文件，则 Bootstrap CSS 文件中的样式可能会覆盖您的样式。在这种情况下，您的样式将不适用。因此，您应该在加载Bootstrap CSS 文件后加载特定的 CSS 文件。
