尊敬的开发者,
刚开始做网站,想做hero的轮播效果,所以复制自this site ,虽然很酷。
我想通过在两侧添加线性渐变为 (0,0,0,0.7)
的背景图像来降低英雄的不透明度,以达到这样的效果,
所以我删除了 src
标签并在 div
标签中添加了图像链接,但是,它似乎不起作用,图像没有显示在页面。
这是我的代码
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" style="background-image: url('image/must.jpg'), linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7));">
<!--<img src="image/must.jpg" class="d-block w-100" alt="...">-->
</div>
<div class="carousel-item">
<img src="image/shelby1.jpg" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
帮帮我..
最佳答案
html:
<div class="item">
<img src="images/pic2.jpg" alt="pic 2">
<div class="carousel-caption">
<h1>Web Desgin</h1>
</div>
</div>
CSS:
.item img {
position: absolute;
object-fit:cover;
width: 100%;
top: 0;
left: 0;
min-height: 572px;
background:rgba(0,0,0,0.7);
}
希望对你有帮助
关于javascript - 如何在 Bootstrap 中将背景图像添加到轮播,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57506567/