Bootstrap carousel组件控件不透明

Question

我正在尝试使用Bootstrap carousel组件。我唯一的问题是，控制是不透明的，因为他们是在bootstrap文档中的例子。

下面的代码:

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

Answer 1

不确定这是否是一个真正的答案，但解决方法是使用

<a role="button"> 

不是

<button>

Answer 2

检查是否有一个冲突的样式，您已应用于按钮元素的不透明度。它可能会覆盖旋转按钮的。9不透明度。