Question

我目前正在网站的登录页面上工作。我希望导航菜单具有阴影模糊，就像这样（https://ibb.co/9ZkJ8tD）。

问题是，我无法弄清楚如何执行该操作。我尝试创建一个容器div，其中包含两个单独的div（掩码div和实际的div）。然后，我使两个div在规格和位置上相互镜像。到目前为止，这是我的CSS（我在每个元素周围创建边框，以便可以在实时服务器中看到它们）：

HTML

<body>
<div class="wrapper">
    <div class="main">
        <div class="inner">
            <div class="header">
                <h1>Distinctive Brokers</h1>
            </div>
            <div class="nav-container">
                <ul id = "menu" >
                    <li><a href = "#listings">Listings</a></li>
                    <li><a href = "#about">About</a></li>
                    <li><a href = "#contact">Contact</a></li>
                </ul>
                <div class="mask">
                </div>
            </div>
        </div>
    </div>
</div>

CSS

    .mask
    {
        border: 2px solid gold;
        margin: 0;
        padding: 10px;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    #menu{

        border: 2px solid magenta;
        list-style-type: none;
        display: flex;
        margin: 0;
        padding: 10px;
        align-items: center;
        align-content: space-between;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    li{
        padding-left: 10px;
        padding-right: 10px;
        margin: auto;
    }

这是目前的样子（https://ibb.co/xf80vFt）。

创建导航栏的最简单方法是什么？我是Web开发的新手，所以我会避免使用Javascript。

Answer 1

您可以添加background-color: rgba(255, 255, 255, 0.1)以具有可见性。您可以根据自己喜欢的可见性来更改a号。 background-color: rgba(255, 255, 255, 1)将变为全白，而background-color: rgba(255, 255, 255, 0)将变为全透明。

如何在一个div上覆盖另一个div？

1 个答案: