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图像仅用于演示）：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

如果你想要把这两个课程都需要一个＆＃34;，＆＃34;其中。否则你正在寻找班级内的课程

试试这个 .item，.active {background-image：url（images / logo.png）; }

Answer 3

我相信它会起作用 .item.active {background-image：url（images / logo.png）; } 如果没有，我想也许你定义它的代码有问题。你能否告诉代码你如何定义不适合你的css？

- - - - - - - - 编辑

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

如何使html div中的style =“background-image：url（）”进入css以便我可以设置样式？

3 个答案: