时间戳

首页 > 解决方案 > 无法覆盖 Bootstrap Jumbotron

html - 无法覆盖 Bootstrap Jumbotron

问题描述

我已经研究了两天了，我尝试的任何方法似乎都没有奏效。我要做的就是jumbotron在引导程序中将图像设置为类的背景。

我已经使用内联 CSS 成功地做到了这一点，但想避免使用它。我试过分配background-image: url('link');给jumbotron班级。我已将它分配给它自己的唯一 ID，我尝试将它分配给 #id .jumbotron 但它不应用图像。

这是我想要背景图像的巨型显示器。

<div class="jumbotron jumbotron-fluid" id="jumbotronBackground" >
    <div class="container">
        <img id="logoMain" src="nslogo1.png" >
    </div>
</div>

标签： htmlcsstwitter-bootstrap

解决方案

您可以#jumbotron用作参考，但最好坚持使用 classes。

只要确保规则足够具体，您就可以覆盖该属性。eg#jumbotronBackground.jumbotron比仅#jumbotronBackgroundor更具体.jumbotron。

如果你想覆盖一个属性，你可以添加更多的说明符。只是为了完成：!important如果规则不太具体，您可以在属性之后添加，它会忽略所有其他适用的选择器，但这是不好的做法！

.jumbotron.example1 {
  height: 160px;
  background-image: url('https://via.placeholder.com/150');
  background-repeat: no-repeat;
  /* repeat is default, use no-repeat if you want the image to render only once */
  background-size: contain;
  /* contain will make it render so that the image will be fully contained in the corresponding element (keeps the aspect ratio), cover will make it fill 100% of the space available (keeps the aspect ratio) */
}

.jumbotron.example2 {
  height: 160px;
  border: 1px dotted black;
  /* it will use the background-color that is defined in jumbotron you could set background-color: $color to change it */
  background-image: url('https://via.placeholder.com/150');
  background-repeat: no-repeat;
  /* here the image will be 150px wide and high */
}

.jumbotron.example3 {
  height: 160px;
  border: 1px dotted black;
  /* it will inherit the color from the parent - here body - you could also use transparent or white */
  background-color: inherit;
  background-image: url('https://via.placeholder.com/150');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* here the image will be full width/height, but without the aspect ratio */
}
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
  <div class="jumbotron example1 jumbotron-fluid" id="jumbotronBackground">
    <div class="container">
      <img id="logoMain" src="nslogo1.png">
    </div>
  </div>

  <div class="jumbotron example2 jumbotron-fluid" id="jumbotronBackground2">
    <div class="container">
      <img id="logoMain" src="nslogo1.png">
    </div>
  </div>

  <div class="jumbotron example3 jumbotron-fluid" id="jumbotronBackground3">
    <div class="container">
      <img id="logoMain" src="nslogo1.png">
    </div>
  </div>
</body>

推荐阅读