gpt4 book ai didi

html - 背景层元素下层(html/css)

转载 作者:行者123 更新时间:2023-11-28 03:49:46 24 4
gpt4 key购买 nike

我有一个用 div 构建的菜单,我希望菜单项具有较低层的背景,在本例中为正文。

结构:

body {
background-image: url(path/body.png);
}

#menu {
overflow: hidden;
width: 400px;
background-color: #fff;
}

.mm {
overflow: hidden;
float: left;
background-color: #fffl padding:5px 10px;
margin: 0 0 0 10px;
}

.mm.this {
background-color: transparent;
z-index: -9999;
}
<body>
<div id="menu">
<div class="mm this">Home</div>
<div class="mm">Contact</div>
</div>
</body>

看起来像这样:

enter image description here

你希望它看起来像这样: enter image description here

最佳答案

有几种方法可以真正做到这一点。这是其中之一:

.mm.this {
position: relative;
z-index: -9999; /*remove this or set it to auto or a positive value*/
}

.mm.this:after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
background: white;
width: 100%;
height: 1px;
}

这将创建一条水平线并将其定位在事件选项卡的底部。这会将下方的灰色边框与白线重叠。

关于html - 背景层元素下层(html/css),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43786292/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com