更改甜蜜警报 2 的叠加背景颜色答案

【问题标题】：Changing the Overlay background color of sweet alert 2更改甜蜜警报 2 的叠加背景颜色
【发布时间】：2017-10-28 02:32:21
【问题描述】：

我最近将甜蜜警报 1 移动到甜蜜警报 2，但根据文档，没有选项可以为像甜蜜警报 1 这样的警报框的覆盖背景设置主题

.swal-overlay {
  background-color: rgba(43, 165, 137, 0.45);
}.

请问我怎样才能实现改变甜蜜警报2的覆盖背景？

【问题讨论】：

标签： javascript sweetalert2

【解决方案1】：

Swal.fire({
  icon: 'success',
  background: 'red',
})

【讨论】：

感谢您提供答案。您能否编辑您的答案以包括对您的代码的解释？这将有助于未来的读者更好地了解正在发生的事情，尤其是那些刚接触该语言并难以理解概念的社区成员。
对此我不太确定。这可能会更改警报主体颜色，但不会更改覆盖颜色，对吗？

【解决方案2】：

要实现这一点，您只需使用 jQuery 选择器并像这样选择覆盖元素。

<button type="button" onclick="opentheSwal();">OK</button>
<script>
    function opentheSwal() {
        swal(
            'Good job!',
            'You clicked the button!',
            'success'
        );
        $(".swal2-modal").css('background-color', '#000');//Optional changes the color of the sweetalert 
        $(".swal2-container.in").css('background-color', 'rgba(43, 165, 137, 0.45)');//changes the color of the overlay
    }
</script>

您必须选择 .swal2-container.in 来更改覆盖并使用 jqueries .css() 函数应用 css。

祝你好运。

【讨论】：

【解决方案3】：

我遇到了同样的问题，发现有必要在 CSS 中添加 !important：

.swal2-container.swal2-backdrop-show, .swal2-container.swal2-noanimation {
    background: rgba(0,0,0,.95)!important;
}

【讨论】：