如何使 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;
}

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>

Answer 2

HTML 中的类由空格分隔，因此对于该 div，您现在尝试设置的样式是 2 个类——“.item”和“.active”。在您的 CSS 文件中或 <style></style> 标签之间，您需要添加：

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

或

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

取决于您尝试定位的类。

Answer 3

如果你想把这两个类都放在其中，你需要一个“，”。否则你正在寻找一个类中的一个类

试试这个 .item, .active { 背景图片: url(images/logo.png); }

Answer 4

我相信它会使用 .item.active { 背景图片： url(images/logo.png); } 如果没有，我认为您定义的代码可能有问题。 能否请您显示代码如何定义不适合您的 css？

-----编辑-----

我认为问题在于相对路径。 css 文件必须与 html 文件位于不同的目录中，对吧？所以在html文件中定义backgournd-url的时候，相对路径的根路径就是html文件的目录，在css文件中定义的时候，根路径就是css文件的目录。所以我建议你使用绝对路径来定义图片的url。