html - 作为 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;'); 
}