transparent - 如何在所有浏览器中使列表项的背景透明

Question

这可能看起来微不足道，但不知何故我无法让它发挥作用。

我有一个带有列表项的菜单（如下），我想给它一个透明的背景。

<ul class="nav">
    <li>
        <a href="value.php"><img src="./images/content/menu-item.png"></a>
    </li>
    <li>
        <div class="wrapper-demo">
            <div id="dd" class="wrapper-dropdown-5 active" tabindex="1">
                <img src="./images/menu-selected.png">
                <ul class="dropdown">
                    <li><a href="#"><i class="icon-user"></i>Profile</a></li>
                    <li><a href="#"><i class="icon-cog"></i>Settings</a></li>
                    <li><a href="#"><i class="icon-remove"></i>Log out</a></li>
                </ul>
            </div>
        &#8203;</div>
    </li>
    <li>
       ...
    </li>
    <li>
       ...
    </li>
</ul>

问题是我无法为 ul.dropdown 中的 li 项目提供透明背景。

这就是我所做的： -

.wrapper-dropdown-5 .dropdown li {
padding: 0 10px ;
background-color: rgba(0,0,0,.3);

}

即使透明PNG也不起作用。它只是向我展示了一种低色调的颜色，但没有透明度。

谢谢。

Answer 1

IE 不支持 RGBA。

.wrapper-dropdown-5 .dropdown li {
  padding: 0 10px ;
  background-color: #000;
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";

  /* IE 5-7 */
  filter: alpha(opacity=30);

  /* Netscape */
  -moz-opacity: 0.3;

  /* Safari 1.x */
  -khtml-opacity: 0.3;

  /* Good browsers */
  opacity: 0.3;
}