Html 玻璃变形：试图使div位于图像顶部_Html_Css_Sass

Html 玻璃变形：试图使div位于图像顶部

html css sass

Html 玻璃变形：试图使div位于图像顶部,html,css,sass,Html,Css,Sass,我在玩CSS（SASS）中的玻璃变形，无法让包装div（玻璃）显示在图像上无论出于什么原因，代码笔都不想抓取图像，所以这不会有任何帮助。本质上，我希望.header-box\uuu blur成为.header-box\uu contentdiv上包含标题的玻璃div；最终模糊了下面的图像 HTML: <html lang="en"> <head> <meta charset="UTF-8"> <m

我在玩CSS（SASS）中的玻璃变形，无法让包装div（玻璃）显示在图像上

无论出于什么原因，代码笔都不想抓取图像，所以这不会有任何帮助。本质上，我希望

.header-box\uuu blur

成为

.header-box\uu content

div上包含标题的玻璃div；最终模糊了下面的图像

HTML:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/main.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.8/lottie.min.js"></script>
    <script
    src="https://maxst.icons8.com/vue-static/landings/animated-icons/icons/eye/eye.json">
    </script>
    <title>Tyler Duke | Web Design</title>
</head>
<body>
    <nav>
        <ul class="nav-list">
            <li class="nav-list__logo"> </li>
            <li class="nav-list__item1">About Us</li>
            <li class="nav-list__item2">Shop</li>
            <li class="nav-list__item3">FAQ</li>
            <li class="nav-list__item4">Contact Us</li>
        </ul>
    </nav>

    <div class="header-box__blur">
        <div class="header-box__content">

        </div>
    </div>
</body>
</html>

* {
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0;
}

html,  
body {
    background-color: cadetblue;
    font-size: 24px;
}

.nav-list{
    background-color:darkgreen;
    display: flex;
    flex-direction: row;
    list-style-type: none;
    text-decoration: none;
    justify-content: center;
    box-shadow: black 0px 0px 30px;
    z-index: 500;
    order: 25;
}

.header-box__blur {
    display: flex;
    width: 100vw;
    height: 45vh;
    background: rgba(255, 255, 255, 0.246);
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 13.0px );
    -webkit-backdrop-filter: blur( 13.0px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );    overflow: hidden;
    
    & .header-box__content{
        height: 45vh;
        width: 100vw;
        position: absolute;
        background-image: url('https://images.unsplash.com/photo-1590682700085-fbb1431a7629?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }


}