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

How do I make the style="background-image: url()" in the html div go into css so that I could style it?

提问by Nora

How do I make the style="background-image: url()" in the html div go into css so that I could style it? I tried putting it in different divs, but I keep doing something wrong. Since it's class is two words, I can't style that for some reason... Would I have to style it in html?

如何使 html div 中的 style="background-image: url()" 进入 css 以便我可以设置样式？我试着把它放在不同的 div 中，但我一直做错事。由于它的 class 是两个词，因此出于某种原因，我无法对其进行样式设置...我是否必须在 html 中对其进行样式设置？

Here is what I'm working with:

这是我正在使用的内容：

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

Edit--Some of you have asked for the css for the html, so here it is also

编辑——你们中的一些人要求为 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;
}

回答by Syden

• Make sure you remove the inline styles once you set it on the external css, otherwise inline will override external.

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

From this:

由此：

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

to

到

<div class="item active">

• If you are unable to remove the inline styles, you can override it using !important.

• 如果您无法删除内联样式，您可以使用!important.

Like so:

像这样：

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

Snippet below (switched to a placehold.it image just for demonstration):

下面的片段（切换到 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>

回答by Barry

I believe it will work using .item.active { background-image: url(images/logo.png); } If it did not, I think maybe it is something wrong with the codes you define it. Could you please show the codes how you define the css which does not work for you?

我相信它会使用 .item.active { background-image: url(images/logo.png); 如果没有，我想可能是你定义的代码有问题。您能否展示代码如何定义对您不起作用的 css？

-----edit-----

- - -编辑 - - -

I think the problem is the relative path. The css file must be in the different directory from the html file, right? So when you define the backgournd-url in the html file, the root path of the relative path is the directory of the html file, when you define it in css file, the root path is the directory of the css file. So I advice you use the absolute path to define the image url.

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

回答by Alex

Classes in HTML are separated by a space, so for that div you're trying to style what you have right now is 2 classes -- ".item" and ".active". In your CSS file or between <style></style>tags you would need to add:

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

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

or

或者

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

depending on the class you're trying to target.

取决于您尝试定位的课程。

回答by Morpheus

If you want to put both classes you need a "," among them. otherwise you are looking for a class inside a class

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

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

试试这个 .item, .active { background-image: url(images/logo.png); }