设置烤面包机不透明度？答案

【问题标题】：Setting toastr opacity?设置烤面包机不透明度？
【发布时间】：2013-07-12 05:17:28
【问题描述】：

有什么办法可以改变吗？我尝试将 toastClass 定义为不透明度设置为 1 的类，但没有看到任何变化：

.toast-style{
   opacity: 1;
}

toastr.options.toastClass = 'toast-style';

【问题讨论】：

标签： toastr

【解决方案1】：

此操作不需要 JavaScript。您应该可以使用

在 CSS 中更改它

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

或

.toast {
    opacity: 1 !important;
}

【讨论】：

适合大多数情况的解决方案。但是是否有可能在每个 toast 消息的基础上执行此操作？想象一下，在页面上调用 toastr 的大多数用法都是半透明的——但如果用户做了那件特别的事情，我们希望大声而自豪地展示它（不透明），然后等待他们关闭它。
!important 几乎总是邪恶的
请注意，如果使用第二个选项（.toast），您将失去淡入淡出效果！解决方案是第一段代码，但如果您无法让它覆盖默认库 css 优先级，我建议您执行类似 body #toast-container > div { opacity: 1;这应该可以让您保持淡化效果并保持明亮的闪亮通知。
对于 Angular 的 ngx-toastr 包非常有用，如果你不这样做，它就不起作用
@DanielFilipe 谢谢！我想知道为什么当我试图让我的烤面包机变硬时我的褪色消失了......

【解决方案2】：

#toast-container > div {
   opacity: 1;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: alpha(opacity=100);
}

Test Working Example;

【讨论】：

【解决方案3】：

我需要为一个烤面包机做这个，所以走这条路：

toastr.options = {
    ... 
};

toastr.info(
    'All of my favorite singers have stolen all of my best lines',
    'The Title'
);

$('#toast-container').addClass('nopacity');

...然后...

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

【讨论】：

【解决方案4】：

对于那些想要降低不透明度的人，他们可以这样做：

.toast-error { background-color: rgba(255,111,105,0.7) !important; }

【讨论】：

【解决方案5】：

将“~ngx-toastr/toastr.css”中的所有 CSS 复制到应用程序的 styles.css 文件中对我有用。

【讨论】：