如何使style ="background-image:url()"在html div中进入css，以便我可以设置样式? [英] How do I make the style="background-image: url()" in the html div go into css so that I could style it?

问题描述

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

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>

编辑-有些人要求html的css，所以这里也是

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

推荐答案

• 请确保在将外部样式设置为外部CSS时删除内联样式，否则内联样式将覆盖外部样式.

从此:

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

到

<div class="item active">

• 如果无法删除内联样式，则可以使用!important覆盖它.
• If you are unable to remove the inline styles, you can override it using !important.

像这样:

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

下面的代码段(切换到placehold.it图片仅用于演示)

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>

这篇关于如何使style ="background-image:url()"在html div中进入css，以便我可以设置样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！