Question

我正在尝试在<div class="jumbotron">设置背景图片，由于某些原因这似乎是不可能的。图像未显示。

如果我使用相同的代码在背景图像上设置背景图像，我会得到背景图像，但不会在jumbotron中。

的CSS：

.jumbotron {
    background-image: url("/Img/banner.jpg");
    background-repeat: no-repeat;
    background: #808080;
    color: #ffffff;
    width: 80%;
    max-height: 400px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
}

HTML：

 <div class="jumbotron">
    <h1>Text</h1>
    <p class="lead">More text</p>
</div>

Answer 1

问题是您首先设置background-image属性，然后使用background属性覆盖它。

From MDN：

后台CSS速记属性指定显式给定值并将缺少的属性设置为其初始值。

最后一点很重要 - 并将缺少的属性设置为其初始值。

background-image属性的初始值为none。

因此，通过设置background-image，然后将background设置为仅color值，它实际上正在清除background-image，将其重新设置为none }。

尝试以下操作，如果找不到图像或无法正确加载，它将回退到背景色。

background: url("/img/banner.jpg") #808080 no-repeat;

您的规则定义将成为

 .jumbotron {
     background: url("/img/banner.jpg") #808080 no-repeat;
     color: #ffffff;
     width: 80%;
     max-height: 400px;
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 0;
 }

以下两个示例展示了它是如何工作的，一个带有工作图像网址，另一个没有恢复到后备颜色。

工作图片网址示例

.jumbotron {
     background: url("https://placehold.it/650x175?text=BANNER HERE") #808080 no-repeat;
     color: #ffffff;
     width: 80%;
     max-height: 400px;
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 0;
 }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
    <h1>Text</h1>
    <p class="lead">More text</p>
</div>

图片损坏网址恢复为后备颜色的示例

.jumbotron {
     background: url("https://broken.url/noimagehere.jpg") #808080 no-repeat;
     color: #ffffff;
     width: 80%;
     max-height: 400px;
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 0;
 }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
    <h1>Text</h1>
    <p class="lead">More text</p>
</div>

Answer 2

您需要删除.jumbotron类中的background: #808080;

Answer 3

Hmn，尝试打开浏览器工具并检查这个jumbotron。您可以尝试使用Mozilla，它们有非常好的工具，您可以非常轻松地操作CSS样式。

你也可以尝试这样的事情：

 <div class="jumbotron" style="background-color: #000">
    <h1>Text</h1>
    <p class="lead">More text</p>
</div>

背景图像未显示

3 个答案: