【问题标题】:Completely remove Opacity in Toastr.js?完全删除 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 颜色变满(没有透明度)。我试图让它始终保持全彩(不透明)。

【问题讨论】:

    标签: css less toastr


    【解决方案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

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

    使用!important 标志,将没有fadeIn 和fadeOut。

    【讨论】:

    • 使用!important 确实会破坏动画事件,即使在最新的 toastr 中也是如此,不建议这样做。
    猜你喜欢
    • 1970-01-01
    • 2014-02-23
    • 1970-01-01
    • 1970-01-01
    • 2012-06-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-01-31
    相关资源
    最近更新 更多