设置烤面包机不透明度？

Posted 2023-05-08

【中文标题】设置烤面包机不透明度？

【英文标题】：Setting toastr opacity?

【发布时间】：2013-07-12 05:17:28

【问题描述】：

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

.toast-style
   opacity: 1;


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

【参考方案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 文件中对我有用。