英文:
HTML dialog backdrop hides part of element inside dialog
问题
我有以下代码，我想在HTML <dialog> 的左上角显示一个圆圈，但是圆圈的顶半部分被对话框的 ::backdrop 遮挡住了。有没有办法实现这个效果？
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
dialog::backdrop {
backdrop-filter: blur(1px);
}
dialog {
min-width: 400px;
min-height: 100px;
}
.icon {
background-color: blue;
width: 4rem;
height: 4rem;
border-radius: 50%;
position: absolute;
top: -2rem;
left: 1rem;
}
.dialog-actions {
text-align: right;
}
<!-- language: lang-html -->
<button onclick="window.dialog.showModal();">打开对话框</button>
<dialog id="dialog">
<div class="icon"></div>
<form method="dialog">
<div class="dialog-actions">
<button>关闭</button>
</div>
</form>
</dialog>
<!-- end snippet -->
英文:
I have the following code where I would like to show a circle in the top left of an HTML <dialog>, but the top half of the circle gets hidden by the ::backdrop of the dialog. Is there a way to accomplish this?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
dialog::backdrop {
backdrop-filter: blur(1px);
}
dialog {
min-width: 400px;
min-height: 100px;
}
.icon {
background-color: blue;
width: 4rem;
height: 4rem;
border-radius: 50%;
position: absolute;
top: -2rem;
left: 1rem;
}
.dialog-actions {
text-align: right;
}
<!-- language: lang-html -->
<button onclick="window.dialog.showModal();">open dialog</button>
<dialog id="dialog">
<div class="icon"></div>
<form method="dialog">
<div class="dialog-actions">
<button>close</button>
</div>
</form>
</dialog>
<!-- end snippet -->
答案1
得分: 1
看起来它被对话框本身的溢出隐藏了，而不是背景。请在对话框中添加 overflow: visible;：
dialog::backdrop {
backdrop-filter: blur(1px);
}
dialog {
min-width: 400px;
min-height: 100px;
overflow: visible;
}
.icon {
background-color: blue;
width: 4rem;
height: 4rem;
border-radius: 50%;
position: absolute;
top: -2rem;
left: 1rem;
}
.dialog-actions {
text-align: right;
}
<button onclick="window.dialog.showModal();">打开对话框</button>
<dialog id="dialog">
<div class="icon"></div>
<form method="dialog">
<div class="dialog-actions">
<button>关闭</button>
</div>
</form>
</dialog>
英文:
It looks like it's hidden by the overflow of the dialog itself, not the backdrop. Add overflow: visible; to the dialog:
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-css -->
dialog::backdrop {
backdrop-filter: blur(1px);
}
dialog {
min-width: 400px;
min-height: 100px;
overflow: visible;
}
.icon {
background-color: blue;
width: 4rem;
height: 4rem;
border-radius: 50%;
position: absolute;
top: -2rem;
left: 1rem;
}
.dialog-actions {
text-align: right;
}
<!-- language: lang-html -->
<button onclick="window.dialog.showModal();">open dialog</button>
<dialog id="dialog">
<div class="icon"></div>
<form method="dialog">
<div class="dialog-actions">
<button>close</button>
</div>
</form>
</dialog>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论