CSS蒙版遮住菜單可以讓網(wǎng)站的菜單欄更加美觀，同時也可以增加網(wǎng)站的信息層次感。下面就為大家展示一個關(guān)于CSS蒙版遮住菜單的實現(xiàn)案例。

.menu {
position: relative; /* 相對定位 */
 }
.mask {
position: absolute; /* 絕對定位 */
top: 100%; /* 設(shè)置遮罩層距離頂部位置 */
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7); /* 設(shè)置背景色，即蒙版顏色 */
visibility: hidden; /* 默認隱藏 */
opacity: 0; /* 默認透明度為0 */
transition: all 0.3s ease; /* 過渡效果 */
 }
.menu:hover .mask {
visibility: visible; /* 鼠標經(jīng)過時，顯示遮罩層*/
opacity: 1;
top: 0;
 }

這里我們首先為菜單欄添加一個相對定位的class，接著添加一個絕對定位的遮罩層，初始時遮罩層是不可見的，通過設(shè)置透明度為0和visibility屬性為hidden來實現(xiàn)。當鼠標經(jīng)過菜單欄時，設(shè)置遮罩層的visibility屬性為visible，opacity屬性為1，同時將頂部位置設(shè)置為0來實現(xiàn)一個漸變顯示效果。

通過這個CSS蒙版遮住菜單案例，我們可以非常簡單明了地實現(xiàn)這一功能，增強網(wǎng)站的視覺效果與信息層次感。