我正在尝试制作一个背景颜色为半透明的下拉菜单。 它在除 IE8 之外的所有浏览器上都能正常工作。
当菜单使用下面的Filter半透明时，看起来更好但下拉菜单不显示。我将菜单的背景色设为白色来解决这个问题。
是否可以使背景半透明并且下拉菜单在 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;
}
任何帮助将不胜感激。感谢您阅读我的问题。
最佳答案
我认为您的过滤器十六进制代码不正确。
十六进制代码开头的两个字符表示不透明度
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 提供
关于css - 如何在IE8上制作一个半透明背景色的下拉菜单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38053170/