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''として使用

詳細。 –

コメントありがとうございました！ –

フィルタの16進数コードが正しくないと思われます。

進コードの最初の2つの文字が

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:none;を必要に応じて、これはあなたの<head> consitionalスタイルないあなたのメインのCSSのシートにする必要があります filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#E6ffffff,EndColorStr=#E6ffffff);

：background-color: rgba(255,255,255,0.9);

はに相当します適用されます。

注：私はIE8を持っていないので、私はテストできません。 CSS Tricks

出典

2016-06-27 12:02:26

あなたのアドバイスとリストに感謝します。フィルタの16進コードはIE8のメインCSSと同じように正常に機能し、プルダウンメニューの問題は無視されました。しかし、とにかく、私は正しいコードを書くように注意します。ありがとうございました！ –

IE8で半透明の背景色でドロップダウンメニューを作成するにはどうすればよいですか？

答えて

関連する問題