[英]Bootstrap carousel component controls are not transparent
I'm trying to use a Bootstrap carousel component .我正在尝试使用Bootstrap 轮播组件。 The only problem I'm having is that the controls are not transparent, as they are in the example in the bootstrap documentation.我遇到的唯一问题是控件不透明,就像引导文档中的示例一样。
Code below:下面的代码:
<div class="carousel slide" id="slide-show" data-bs-ride="false">
<div class="carousel-inner" id="slide-show-contents">
<div class="carousel-item" style="width: 435px; height: 245px">
<div>This is a slide</div>
</div>
<div class="carousel-item" style="width: 435px; height: 245px">
<div>This is another slide</div>
</div>
</div>
<button
class="carousel-control-prev"
type="button"
data-bs-target="#slide-show"
data-bs-slide="prev"
>
<span
class="carousel-control-prev-icon"
aria-hidden="true"
></span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next"
type="button"
data-bs-target="#slide-show"
data-bs-slide="next"
>
<span
class="carousel-control-next-icon"
aria-hidden="true"
></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Not sure if this is a real answer, but the workaround is to use不确定这是否是一个真正的答案,但解决方法是使用
<a role="button">
instead of代替
<button>
Check if there's a conflicting style that you have applied for the button element for opacity.检查您是否为按钮元素应用了不透明的样式冲突。 It might be overriding the .9 opacity of the carousel buttons.它可能会覆盖轮播按钮的 0.9 不透明度。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.