css HTML对话框-背景颜色

ht4b089n 于 2023-05-02 发布在其他

关注(0)|答案(5)|浏览(123)

我一直在遵循一些关于如何创建对话框的指南：
http://blog.teamtreehouse.com/a-preview-of-the-new-dialog-element
由于某种原因，我的CSS没有呈现背景颜色。
这是我的小提琴：http://jsfiddle.net/oampz/8kRc3/
HTML：

<dialog class="modal">This is the dialog!</dialog>

CSS：

.modal {
    /* arbitrary styling */
    background-color: white;
    border-radius: 5px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    height:200px;
    width:300px;
    /* change position to fixed if you want to prevent the dialog from scrolling away, and center it */
    position:fixed;
    top:50%;
    left:50%;
    margin-left: -150px;
    margin-top:-100px;
}
.modal::backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

任何帮助感激

css

来源：https://stackoverflow.com/questions/22557032/html-dialog-background-colour

5条答案

按热度按时间

ggazkfy81#

改变背景颜色为任何其他颜色，然后白色！在Chrome中运行：请看这里。.. http://jsfiddle.net/8kRc3/3/

body{
     background-color: blue;
}
.modal {
    background-color: white;
    border-radius: 5px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    height:200px;
    width:300px;
    position:fixed;
    top:50%;
    left:50%;
    margin-left: -150px;
    margin-top:-100px;
}

赞(0）回复(0）举报 2023-05-02

kgsdhlau2#

请用这种方法试试

.modal::after {
        position: fixed;
        content:'';
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
    }

赞(0）回复(0）举报 2023-05-02

67up9zun3#

您可以简单地使用：
背景：颜色;
而不是背景色不起作用。

赞(0）回复(0）举报 2023-05-02

2mbi3lxu4#

根据文档，只有当您调用方法.showModal()时，它才有效
当对话框显示为HTMLDialogElement.showModal()时，可以使用：：background CSS伪元素在元素后面设置样式。例如，使模态对话框后面无法访问的内容变暗。
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

赞(0）回复(0）举报 2023-05-02

disbfnqx5#

状态2023：存在::backdrop CSS伪元素。

dialog::backdrop {
  background: rgba(255, 0, 0, 0.25);
}

有关详细信息，请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop?retiredLocale=en

赞(0）回复(0）举报 2023-05-02

我来回答

css HTML对话框-背景颜色

5条答案

相关问题

热门标签

最新问答