背景レイヤー要素下（html/css）

私はdivで構築されたメニューを持っています。この場合、本体の下位レイヤの背景を持つメニューアイテムが必要です。背景レイヤー要素下（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）

答えて

関連する問題