如何在IE8上使用半透明背景顏色製作下拉菜單？

我想做一個下拉菜單，其背景顏色是半透明的。它在所有瀏覽器上工作得很好，除了IE8。如何在IE8上使用半透明背景顏色製作下拉菜單？

當使用下面的過濾器菜單是半透明的時，它看起來更好，但下拉菜單不顯示。爲了解決這個問題，我將菜單的背景顏色設置爲白色。

是否有可能使背景半透明，下拉菜單仍然在IE8上工作？

過濾

 filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#CCffffff,EndColorStr=#CCffffff); 
    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#CCffffff,EndColorStr=#CCffffff)";

HTML

<!--[if lt IE 9]> 
<style type="text/css"> 
.inner { background-color: #fff !important 
} 
#menu li ul { background-color: #fff; 
} 
</style> 
<![endif]--> 

<header> 
<div class="inner"> 
    <nav> 
    <ul id="menu"> 
    <li><a href="#">menu1</a></li>  
    <li><a href="#">menu2</a> 
<ul class="sub-menu"> 
     <li> <a href="#">submenu_1</a> </li> 
     <li> <a href="#">submenu_2</a> </li> 
     <li> <a href="#">submenu_3</a> </li> 
     </ul> </li> 
     <li><a href="greeting.html">menu4</a> </li> 
    <li><a href="greeting.html">menu5</a> 
    </li> 
    </ul> 
</nav> 
    </div> 
</header>

CSS

.inner { 
margin: 0 auto; 
z-index: 999; 
background-color: rgba(255,255,255,0.9); 
position: fixed; 
left: 1%; 
width: 100%; 
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99ffffff,EndColorStr=#99ffffff); 
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99ffffff,EndColorStr=#99ffffff)"; 
} 

#menu { 
margin-top: 31px; 
margin-left: 15%; 
float: left; 
width: 70%; 
} 

#menu li { 
text-align: center; 
margin-left: 60px; 
display: inline-block; 
float: left; 
height: 50px; 
} 

#menu li:hover > ul { 
display: block; 
} 

#menu li > a { 
    cursor: pointer; 
    display: block; 
    text-decoration: none; 
    position: relative; 
    top: -20px; 
    height: 50px; 
} 

#menu li ul { 
display: none; 
position: absolute; 
background-color: rgba(255,255,255,0.9); 
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99ffffff,EndColorStr=#99ffffff); 
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99ffffff,EndColorStr=#99ffffff)"; 
left: 0; 
top: 100%; 
width: 100%; 
z-index: 2000; 
} 

#menu li:hover ul.sub-menu { 
display: block; 
} 


#menu li ul.sub-menu li { 
float: none; 
margin-left: 0px; 
width: 130px; 
height: auto; 
padding: 0; 

} 

#menu li ul.sub-menu { 
display: none; 
position: absolute; 
width: 130px; 
padding-left: 0; 
    left: 430px; 
}

任何幫助將不勝感激。感謝您閱讀我的問題。

來源

2016-06-27 mai_h

切割一個10 * 10'png'圖像提供並作爲'背景image'與重複使用。 –

感謝您的評論！ –

我相信你的過濾器十六進制代碼是不正確的。

在十六進制代碼的開始的兩個字符表示的不透明度

rgba(255, 255, 255, 0.5)將相當於(startColorstr=#80FFFFFF,endColorstr=#80FFFFFF)

00是透明的和不透明FF。下面是完整的映射：

100% — FF 
95% — F2 
90% — E6 
85% — D9 
80% — CC 
75% — BF 
70% — B3 
65% — A6 
60% — 99 
55% — 8C 
50% — 80 
45% — 73 
40% — 66 
35% — 59 
30% — 4D 
25% — 40 
20% — 33 
15% — 26 
10% — 1A 
5% — 0D 
0% — 00

所以這樣的：background-color: rgba(255,255,255,0.9);

等同於： filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#E6ffffff,EndColorStr=#E6ffffff);

這應該是你的<head> consitional風格不你的主要CSS片，因爲它也需要background:none;到應用。

注意我沒有IE8所以我無法測試。

詳細通過CSS Tricks

來源

2016-06-27 12:02:26

感謝您的建議和名單。過濾器十六進制代碼正常工作，因爲它在IE8的主CSS中，忽略了下拉菜單中的問題。但無論如何，我會小心編寫正確的代碼。謝謝！ –

如何在IE8上使用半透明背景顏色製作下拉菜單？

回答

相關問題