作为ul的背景的透明PNG仅在绝对定位ul时才是透明的

Question

我遇到一个奇怪的问题，我有一个无序列表，背景图像是部分透明的PNG。直到我将无序列表的位置设置为绝对值才显示透明度。这有什么解释吗？这真的让我失望了。

<ul id="flag_down">
                    <li>
                        <a href="#" class="flag" onclick="return false"></a><span>Flag</span>
                        <ul id="fd-menu">
                            <li><a class="js-inpost-duplicate" href="#duplicate">duplicate</a></li>
                            <li><a class="js-inpost-nsfw" rel="83858" href="#nsfw">nsfw</a></li>
                            <li><a href="/dmca/">copyright</a></li>
                        </ul>
                    </li>
                </ul>

CSS：

#flag_down li ul {
display:none;
left:6px;
margin-top:2px;
position:relative;
background: url("../bg-dropdown.png") repeat-y scroll 0 0 transparent;
width: 83px;
z-index: 9999;

}

Answer 1

使用JavaScript：

var uls = document.getElementsByTagName("ul");
for(var i=0; i<uis.length; i++) {
     var t = uis[i];
     if(t.style.position == "absolute") 
         t.setAttribute("style", 'url("../bg-dropdown.png") repeat-y scroll 0 0 transparent;'); 
}