设置toastr的不透明度？

Question

有没有办法去改变它？我尝试将toastClass定义为一个不透明度设置为1的类，但是没有看到任何变化：

.toast-style{
   opacity: 1;
}

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

- RobVious

Answer 1

不需要 JavaScript。你应该能够使用 CSS 更改此内容，可以选择以下方式之一：

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

.toast {
    opacity: 1 !important;
}

- John Papa

---

对于大多数情况来说，这是个好的解决方案。但是否可以针对每个提示信息单独设置？想象一下，在页面上大多数toastr调用的使用都很好（半透明），但如果用户执行了某个特殊操作，我们希望以醒目的方式（不透明）展示它，并等待他们关闭。 - Don Cheadle

!important 几乎总是有害的。 - Madbreaks

请注意，如果使用第二个选项（.toast），您将失去渐变淡入淡出效果！解决方案是使用第一行代码，但是如果您在覆盖默认库CSS优先级方面遇到麻烦，建议您采取以下措施：body #toast-container > div { opacity: 1; }这样可以保持淡入淡出效果，并保持明亮闪耀的通知。 - Daniel Filipe

如果你不这样做，对于 Angular 的 ngx-toastr 包来说非常有用，否则它将无法正常工作。 - boctulus

@DanielFilipe 谢谢！我在尝试让我的toastr变成实心时，不知道为什么我的淡入淡出效果消失了... - houallet

我们应该能够在 toastr.options{..} 中设置不透明度。根据 toast 消息显示的位置，它有时会与背景混合。我希望所有消息都是100％完全不透明的 - 没有透明度。 - Stack Undefined

Answer 2

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

测试工作示例；

- Angelina

Answer 3

我需要为单个toastr执行此操作，因此选择了这种方法：

toastr.options = {
    ... 
};

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

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

"...and then..."（然后）

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

- Madbreaks

Answer 4

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

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

- Farhad Hessari

Answer 5

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

- Sai Sreenivas

Answer 6

如果您在将透明度设置为十后无法看到弹出通知，请检查您项目中的angular.json文件中的CSS配置。就像这样：

"styles": [
  "styles.scss",
  "node_modules/ngx-toastr/toastr.css" // try adding '../' if you're using angular cli before 6
]

- ankit