如何使 html div 中的 style="background-image: url()" 进入 css 以便我可以设置样式？

Question

如何使 html div 中的 style=“background-image: url()” 进入 css 以便我可以设置样式？我试着把它放在不同的 div 中，但我总是做错事。因为它的类是两个词，出于某种原因我不能设置它的样式……我必须用 html 设置它的样式吗？

这是我正在使用的：

     <div id="home-slider" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="item active" style="background-image: url(images/logo.png)" >
      <div class="caption">
        <h1 class="animated fadeInLeftBig">The **** Organization  </h1>
        <p class="animated fadeInRightBig">****</p>
        <a data-scroll class="btn btn-start animated fadeInUpBig" href="#rescue">****</a>
      </div>
    </div>
  </div>
</div>

编辑——你们中的一些人要求 html 的 css，所以这里也是

#home-slider {
  overflow: hidden;
  position: relative;
  attachment: fixed;
  size: cover;
  repeat: no-repeat;
  width: 100%;
  height: 100vh;

}

#home-slider .caption {
  position: absolute;
  top: 50%;
  margin-top: -104px;
  left: 0;
  right: 0;
  text-align: center;
  text-transform: uppercase;
  z-index: 15;
  font-size: 18px;
  font-weight: 300;
  color: #fff;
  vertical-align: center;
  height: 100vh;
  font-size: 2em;
}

#home-slider .caption h1 {
  color: #fff;
  size: 72px;
  font-weight: 800;
  margin-bottom: 30px;
  vertical-align: center;

}

.item, .active { background-image: url(images/logo.png); } {
  height: 100vh;
  width: 100vh;
}

.item { background-image: url(images/logo.png); } {
  height: 100vh;
  width: 100vh;
}

.active { background-image: url(images/logo.png); } {
  height: 100vh;
  width: 100vh;
}

.caption .btn-start {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding:14px 40px;
  border: 2px solid #6e6d6c;
  border-radius: 4px;
  margin-top: 40px;
  vertical-align: center;
}

.caption .btn-start:hover {
  color: #fff
}

.carousel-fade .carousel-inner .item {
  opacity: 0;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
  /*  just in case if I want the image to be "parallax"
  background-attachment: fixed;
  */
  background-position: center;
  background-color: #6e6d6c;

}

.carousel-fade .carousel-inner .active {
  opacity: 1;
  background-size: 100%;
}

.carousel-fade .carousel-control {
  z-index: 2;
}

原文由 Nora 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

• 确保在外部 css 上设置内联样式后将其删除，否则内联将覆盖外部。

由此：

 <div class="item active" style="background-image: url(images/logo.png)">

到

<div class="item active">

• 如果您无法删除内联样式，可以使用 !important 覆盖它。

像这样：

 .item.active {
  background-image: url(images/logo.png) !important;
}

下面的片段（切换到 placehold.it 图像只是为了演示）：

 .item.active {
  background-image: url(https://placehold.it/200x200);
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div id="home-slider" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="item active">
      <div class="caption">
        <h1 class="animated fadeInLeftBig">The **** Organization  </h1>
        <p class="animated fadeInRightBig">****</p>
        <a data-scroll class="btn btn-start animated fadeInUpBig" href="#rescue">****</a>
      </div>
    </div>
  </div>
</div>

原文由 Syden 发布，翻译遵循 CC BY-SA 3.0 许可协议