刪除部分背景/製作透明

我在頁面下方製作一個菜單，並具有85％的透明度。在頁面下滑或單擊某個項目時，當前DIV的名稱下方會出現一個箭頭。
我希望這個箭頭是透明的，所以用戶可以閱讀它背後的內容。如果我將它製作爲圖像並使其透明，則只顯示它下面的內容（顯然，該菜單）。
所以，我的問題是，我該如何使該部分透明？
這裏是我當前的代碼：
HTML：刪除部分背景/製作透明

<div class="menu"> 
    <ul class="navigation"> 
     <li><a href="#home">Home</a></li> 
     <li><a href="#aboutme">About Me</a></li> 
     <li><a href="#portfolio">Portfolio</a></li> 
     <li><a href="#services">Services</a></li> 
     <li><a href="#contact">Contact</a></li> 
    </ul> 
</div>

CSS：

.menu { 
    position: fixed; 
    width: 100%; 
    height: 60px; 
    background-image: url('images/menubg.png'); 

} 

ul.navigation { 
    list-style: none; 
    text-align: center; 
    font-family: 'Allerta', serif; 
    text-transform: uppercase; 
    font-size: 22px; 
    margin: 0px; 
    padding-top: 19px; 
} 

ul.navigation li { 
    display: inline;  
} 

ul.navigation a { 
    color: #dcdcdc; 
    margin-right: 30px; 
    margin-left: 30px; 
    text-decoration: none; 
    padding-bottom: 35px; 
} 

ul.navigation a:hover { 
    background-image: url('images/hover2.png'); 
    background-repeat: no-repeat; 
    background-position: center; 
}

來源

2011-03-19 Joseph Duffy

我增加多一點的代碼，給的背景是怎麼做的想法，我需要的。菜單背景的一部分變成透明，所以你可以通過看。 – 2011-03-20 10:46:21

假設透明的箭頭是你所需要的，請使用以下CSS屬性來實現跨瀏覽器透明度支持。

#arrow { 
-khtml-opacity:.50; 
-moz-opacity:.50; 
-ms-filter:」alpha(opacity=50)」; 
    filter:alpha(opacity=50); 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5); 
    opacity:.50; 
}

來源

2011-03-20 00:50:05 Hussein

如果我正確理解你的問題，你想顯示的透明度一些級別的圖像？

您可以使用CSS opacity財產，像這樣：

#transparent { 
    background-image: url('images/hover2.png'); 

    opacity: 0.5; 
    filter: alpha(opacity=50); 
}

JSFiddle example

W3Schools reference link

來源

2011-03-19 23:46:23

刪除部分背景/製作透明

回答

相關問題