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

Posted 2023-05-08

技术标签:

【中文标题】完全删除 Toastr.js 中的不透明度？【英文标题】：Completely remove Opacity in Toastr.js? 【发布时间】：2014-01-01 14:21:46 【问题描述】：

有没有办法完全移除 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 颜色变满（没有透明度）。我试图让它始终保持全彩（不透明）。

【问题讨论】：

【参考方案1】：

尝试使用 !important 覆盖它：

.toast 
  opacity: 1 !important;


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

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

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

【讨论】：

重要会起作用。但这也取决于您将 CSS 放在与 toastr 的 css 相关的位置。顺序很重要，应该在使用 !important 之前考虑。另外，您不应编辑 toastr.css，而应添加您自己的自定义 css。否则，当您升级 toastr 时，您将丢失对 toastr.css 的更改它确实有效，但 fadeIn 和 fadeOut 停止工作。 fadeIn / fadeOut 最有可能使用不透明度 - 这当然会禁用它。请不要使用!important。几乎从不需要它，而且将来几乎总是会让您或其他人感到头疼。【参考方案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)";

您可以通过查看at this fiddle 并使用检查工具（如 Firebug 等）检查上述内容是否在浏览器中产生不透明度。

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

【讨论】：

主要是我试图在显示消息时获得不透明的全彩色。这目前仅在我将鼠标放在上方时发生，但初始消息（由 toast.warning("ddd") 触发的消息确实看起来是半透明的。建议的选项都不起作用。它仍然是半透明的（：跨度> 【参考方案3】：

以下适用于 v2.1.3