如何使 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;
}
最佳答案
- 确保在外部 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>
关于html - 如何使 html div 中的样式 ="background-image: url()"进入 css 以便我可以设置样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45624017/