背景圖層元素較低（html/css）

我有一個菜單，使用divs構建，我希望菜單項具有較低層背景，在本例中爲body。背景圖層元素較低（html/css）

結構：

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

來源

2017-05-04 wojttaa

有幾種方法可以確實做到這一點。以下是其中的一個：

.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; 
}

這會創建一條水平線並將其置於活動選項卡的底部。這將與下面的灰色邊框以白線重疊。

來源

2017-05-04 15:00:12 Chris

背景圖層元素較低（html/css）

回答

相關問題