我是 CSS 的新手,我想在彩色 div 上制作一个透明的轮播,我该如何实现?
那么这是我的 html
代码:
<div class="second-phase">
<!-- Tab for Carousel-->
<div id="products-page-carousel"></div>
<!--Carousel View-->
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- The slideshow -->
<div class="carousel-inner" >
<div class="carousel-item active" id="my-carousel-bg" >
<center>
<img src="/media/g01hgi0m/branded-basin.png" alt="Los Angeles" width="30%" height="30%">
</center>
</div>
<div class="carousel-item" id="my-carousel-bg">
<center>
<img src="/media/waqd3xdw/branded-milk-crate.png" alt="Chicago" width="10%" height="10%">
</center>
</div>
<div class="carousel-item" id="my-carousel-bg">
<center>
<img src="/media/g01hgi0m/branded-basin.png" alt="New York" width="30%" height="30%">
</center>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#carousel" data-slide="prev">
<img src="/media/aqrnoaxe/asset-1.png" width="17%"/>
</a>
<a class="carousel-control-next" href="#carousel" data-slide="next">
<img src="/media/xqwj1jpx/asset-3.png" width="17%"/>
</a>
</div>
</div>
然后,我的 CSS
也在这里:
.second-phase{
margin-top: -170px;
height: 700px;
}
#my-carousel-bg{
background-color: transparent;
opacity: 2;
}
我的输出应该是这样的:
最佳答案
一个页面上不能有多个 id 标签。它们在整个文档中应该是唯一的。尝试将 id 更改为类,看看是否能解决问题。
关于html - 使引导轮播背景透明,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58359294/