完全删除Toastr.js中的不透明度？

Question

有没有办法完全删除 Toastr.js 上的透明度？ 我尝试更改 .less 文件中的各个行

.opacity(@opacity) {
@opacityPercent: 100; // instead of @opacity * 100;
opacity: 1; // instead of @opacity;
-ms-filter:  ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=@{opacityPercent})";
filter: ~"alpha(opacity=@{opacityPercent})";
     }

以及每个标明 opacity(x) 的地方，其中 x 不为 1，但它仍然显示不透明度。

我还尝试在我自己的 CSS 中添加以下几行

.toast {
   opacity: 1;
}

#toast-container > div {
   opacity: 1; 
}

但我仍然在 div 消息显示上看到半不透明。鼠标悬停时，div 颜色变满（无透明度）。我试图始终使其保持全彩（无透明度）。

Answer 1

尝试使用 !important:

覆盖它

.toast {
  opacity: 1 !important;
}

#toast-container > div {
  opacity: 1 !important; 
}

您还可以尝试在 Chrome 中“检查元素”来查看哪个 css 标签导致不透明度。

如果这不起作用，您能否提供指向您页面的链接？

Answer 2

这取决于您所说的“删除”是什么意思

如果你根本不希望 mixin 生成任何 CSS，但也不想删除代码中的所有 mixin 调用，那么就这样做（注释掉代码）：

.opacity(@opacity) {
  // @opacityPercent: @opacity * 100;
  // opacity: @opacity;
  //-ms-filter:  ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=@{opacityPercent})";
  //filter: ~"alpha(opacity=@{opacityPercent})";
}

以上将“什么也不做”。如果你想要生成某种类型的CSS（出于某种原因，我想不出为什么），但你实际上并不希望在浏览器中使用该代码apply任何

opacity

设置，那么给它一个虚假值浏览器会忽略，像这样：

.opacity(@opacity) {
  @opacityPercent: bogus;
  opacity: bogus;
  -ms-filter:  ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=@{opacityPercent})";
  filter: ~"alpha(opacity=@{opacityPercent})";
}

您可以通过查看 这个小提琴并使用检查工具（如 Firebug 等）检查它来检查上述内容是否在浏览器中生成不透明度。

我真的相信你会寻求第一个选择。

Answer 3

以下适用于 v2.1.3

#toast-container > div {
  opacity: 1;
}

使用

!important

标志，就不会有淡入和淡出。

Answer 4

我正在使用 bootstrap 4.6，设置不透明度没有帮助。 但是为

toast-body

设置 background-color: white 就完成了这项工作。

您还可以在 toast-body

上使用 bg-light 等

希望这对某人有帮助！