下拉圖片是網頁制作中非常常見的一種效果，通過css的下拉菜單技術實現。然而，在實現這一效果的過程中，有時候會遇到圖片沒有被遮蓋的問題。今天我們來介紹一下如何解決這一問題。 首先，我們需要了解一下css下拉菜單的基本原理。一般情況下，使用ul和li標簽來實現下拉菜單。其中，ul標簽作為下拉菜單的容器，li標簽作為下拉菜單的選項。通過設置ul的position屬性為relative，li的position屬性為absolute，控制下拉菜單選項的位置，并用display:none隱藏下拉菜單，然后通過:hover或者javascript來控制下拉菜單顯示出來。 代碼如下：

ul{
position: relative;
display: inline-block;
}
ul li {
position: absolute;
top: 100%;
left: 0;
display: none;
}
ul:hover li {
display: block;
}

上述代碼可以實現一個基本的下拉菜單效果。但是，當下拉菜單中的選項包含圖片時，有時候圖片會突破下拉菜單的邊界，顯示在菜單外面。這時就需要設置遮蓋，讓圖片在菜單內部顯示。 實現遮蓋的方法是，在下拉菜單容器中添加一個 div 元素，利用css對該元素進行設置，實現遮蓋效果。需要設置該 div 元素的 position 屬性為 absolute，寬度和高度為 100%。并且，為了避免該 div 遮蓋下面的其他標簽，需要為 ul 設置 z-index 屬性。 代碼如下：

ul{
position: relative;
display: inline-block;
z-index: 1;
}
ul li {
position: absolute;
top: 100%;
left: 0;
display: none;
}
ul li img{
width: 100%; 
height: auto;
}
ul:hover li {
display: block;
}
ul div{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: -1;
background-color: #fff;
opacity: 0.9;
}

上述代碼中，我們為下拉菜單容器 ul 添加了一個 div 元素，該元素的 position 屬性設置為 absolute，并且 z-index 屬性設置為 -1，讓其置于菜單下面。同時，為了讓該元素能夠覆蓋整個菜單，還需要將其寬度和高度都設置為 100%。最后，為了讓它與菜單產生區別，我還給它設置了一個白色的背景，以及 0.9 的透明度。 通過以上代碼的設置，我們就可以實現一個包含有遮蓋效果的 css 下拉圖片菜單了。