Question

我试图制作一个背景颜色为半透明的下拉菜单。除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;
}

任何帮助将不胜感激。感谢您阅读我的问题。

Answer 1

我认为您的过滤器十六进制代码不正确。

十六进制代码开头的两个字符表示不透明度

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>通用样式不主页CSS，因为它还需要background:none;才能应用。

注意我没有IE8所以我无法测试。

CSS Tricks

提供的详细信息

如何在IE8上制作半透明背景色的下拉菜单？

1 个答案: