Question

我有默认的jumbotron（在容器内）

<div class="jumbotron">
    <h1>Example Page</h1>
    <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    <p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>

如何在这个超大屏幕内有背景图片？

当我添加

background: url('a.jpg') no-repeat center center;

到.jumbotron css课程，然后我无法获得整个宽度的图像。我希望它能够扩展到至少充满了jumbotron。

这是完整的风格

    .jumbotron {
      color: white;
      text-shadow: #444 0 1px 1px;
      background:transparent;
      background: url('a.jpg') no-repeat center center;
    }

Answer 1

您应该尝试将jumbotron放在容器外面

<div class="jumbotron"></div>
  <div class="container"></div>

Answer 2

jumbotron可以放在容器内，仍然是全宽的。在CSS中的背景图像规则下添加此规则：

background-size: cover;

如果它仍然不是全宽，您可以在上面的规则下添加：

width:100%;

jumbotron可能会有圆角。如果确实如此，并且您希望删除它们，请添加以下规则：

border-radius:0;

试试这个：

.jumbotron {
  color: white;
  text-shadow: #444 0 1px 1px;
  background:transparent;
  background: url('a.jpg') no-repeat center center;
  background-size: cover;
  width:100%; // may not need
  border-radius: 0; // override rounded corners if applicable
}

Answer 3

您可以使用

background: url('a.jpg') 50% /cover;

这是简写

background-image: url('a.jpg');
background-position-x: 50%;
background-position-y: center;
background-size: cover;

在background的简写中，background-size的值必须紧随background-position的值之后并以/为前缀。

请注意，您不需要简写的center center。您可以使用center（解析为center center或50%（解析为50% center，与center center相同，但更短）。

请注意，如果没有background-position值，background-size将无法使用简写。

还请注意，这里不需要no-repeat（= background-repeat:no-repeat），因为带有background-size:cover的元素无法重复背景，因为它的大小适合元素的宽度和高度，其中之一被裁剪（除非您的元素与图像的比例完全相同-在这种情况下，不会裁剪）。

Answer 4

在div类中添加id标记，意思是

div class="jumbotron" id="test"并在您的css文件中添加此

#test
{
 background: url('a.jpg') no-repeat center center;
}

检查它是否有效

bootstrap：具有全宽和高度背景图像的jumbotron

4 个答案: