CSS 伪元素

CSS 中的 ::backdrop 伪元素用于创建完全覆盖视口的背景，并立即在 <dialog> 或进入全屏模式或位于顶层的元素下方显示或渲染。

这个伪元素的效果可以在以下场景中看到:

  • 所有置于全屏模式的元素。

  • 在顶层渲染的所有 <dialog> 元素。

  • 在顶层渲染的所有弹出框元素。

概述

  • 如果将多个元素放入顶层，每个元素都有自己的 ::背景伪元素。

  • ::backdrop 伪元素能够隐藏、设置样式或使所有内容完全隐藏在顶层元素下方。

  • ::backdrop 伪元素不能从任何其他元素继承或被任何其他元素继承。

  • 对任何或所有属性都没有限制应用于此伪元素。

语法

selector::backdrop {
   /* ... */
}

CSS ::backdrop 示例

这里是一个显示用法的示例<dialog> 元素上的 ::backdrop 伪元素:

<html>
<head>
<style>
    dialog::backdrop {
        background-image: url("/css/images/border.png");
    }

    * {
        box-sizing: border-box;
    }
    body {
        margin: 0;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        background-color: #3d3e3e;
        color: white;
    }
    .container {
        max-width: 100%;
        margin: 0 auto;
        padding: 2rem;
    }
    button {
        display: inline-block;
        border: 1px solid #007bff;
        padding: 5px;
        font-size: 1rem;
        color: black;
        background-color: #bfc2c5;
        cursor: pointer;
    }
    @supports not selector(::backdrop) {
        body::before {    
        box-sizing: border-box;
        content: '';
        }
    }
</style>
</head>
<body>
    <div class="container">
        <p>用于创建背景的伪元素背景</p>
        <button onclick="openDialog()">单击打开对话框</button>
        <dialog>
            <p>See the backdrop</p>
            <button onclick="closeDialog()">关闭</button>
        </dialog>  
    </div>
    <script>
        var dialog = document.querySelector('dialog');
        function openDialog() {  
        dialog.showModal();
        }
        function closeDialog() {  
        dialog.close();
        }
    </script>
</body>
</html>