如何改变 Bootstrap 5.2 toast 的不透明度？答案

【问题标题】：How does one change the opacity of a Bootstrap 5.2 toast?如何改变 Bootstrap 5.2 toast 的不透明度？
【发布时间】：2022-09-23 07:20:25
【问题描述】：

我的 toast 与一些按钮重叠，并且默认不透明度太低，这使得阅读消息变得困难。

这是我的吐司标记：

<div class=\"toast-container p-3 top-0 end-0\" id=\"toastPlacement\" data-original-class=\"toast-container p-3\">
    <div id=\"root\" class=\"toast align-items-center fade animate\" data-bs-autohide=\"false\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\">
      <div class=\"d-flex\">
        <div class=\"toast-body\" id=\"toastMessage\">
          Hello World
        </div>
        <button type=\"button\" class=\"btn-close me-2 m-auto\" data-bs-dismiss=\"toast\" aria-label=\"Close\"></button>
      </div>
    </div>
</div>

我尝试在 \'root\' 元素上简单地设置 style=\"opacity: 1\" ，但这没有任何作用。

我在网上环顾四周，但没有找到任何建议。

此外，除了左、中、右之外，还有对 Toast 位置的更细粒度的控制吗？如果可能，我想按百分比或固定值定位它。

标签： bootstrap-5

【解决方案1】：

你试过吗..？

<div class="opacity-100">...</div>
<div class="opacity-75">...</div>
<div class="opacity-50">...</div>
<div class="opacity-25">...</div>

【讨论】：