10

有没有办法完全消除 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})";
     }

以及它声明不透明度（x）的每个地方，其中 x 不是 1，但它仍然显示不透明度。

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

.toast {
   opacity: 1;
}

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

但我仍然得到 div 消息显示的半不透明性。鼠标悬停时，div 颜色变满（没有透明度）。我试图始终让它全彩（没有透明度）。

4

3 回答 3

23

尝试使用 !important 覆盖它：

.toast {
  opacity: 1 !important;
}

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

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

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

于 2013-12-13T17:58:57.817 回答
5

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

如果您根本不希望 mixin 生成任何 CSS，但也不想删除代码中的所有 mixin 调用，那么只需执行此操作（注释掉代码）：

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

以上将“什么都不做”。如果您想要生成某种类型的 CSS（出于某种原因，我想不出为什么），但您实际上并不希望该代码在浏览器中应用任何opacity设置，然后给它一个浏览器将忽略的虚假值，某事像这样：

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

您可以通过查看此小提琴并使用检查工具（如 Firebug 等）对其进行检查来检查上述内容是否在浏览器中产生不透明度。

但是，我真的相信您会寻求第一种选择。

于 2013-12-13T20:13:24.900 回答
3

以下适用于 v2.1.3

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

有了这个!important标志，就不会有fadeIn 和fadeOut。

于 2016-12-23T16:42:01.133 回答