How do I make the style=“background-image: url()”

问题:

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?

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

#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;
}

回答1:

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

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.

Like so:

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

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

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

回答2:

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:

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

or

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

depending on the class you're trying to target.

回答3:

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); }

回答4:

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?

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