IE7 不透明图像叠加问题

Question

我在 IE7 中的图像上设置不透明覆盖 div 时遇到问题。其他所有浏览器（注意：IE6 及更早版本尚未经过测试）都能很好地处理我的代码和标记，但 IE7 却不能。覆盖层不是不透明的，并且不显示底层图像。

这是我的标记。

    <li>
        <a href="/AquaTrade/designclub/index.php/cs/program/12-program/89-miloslav-cejka">
        <div style="background-image: url(http://10.0.0.3/AquaTrade/designclub/images/stories/program-ico/ikona-cejka-a-club.jpg);">
            <div class="catImg" style="opacity: 0.6; ">
                <!--img src="http://10.0.0.3/AquaTrade/designclub/images/stories/program-ico/ikona-cejka-a-club.jpg" alt="" /-->
            </div>
            <div class="catTitle"><span>Miloslav Čejka</span></div>
        </div>
        </a>
    </li>    

div.catImg 上的不透明度由 jQuery fadeTo 函数设置，因此在 IE 中它是 alpha 不透明度 以下函数设置不透明度

function createCategories() {

    jQuery("#categories div.catImg").fadeTo(0,0.6);
    jQuery("#categories div.catImg").mouseenter(function() {
        jQuery(this).fadeTo(0, 0 );
    });
    jQuery("#categories div.catImg").mouseout(function() {
        jQuery(this).fadeTo(0, 0.6 ); 
    });
    makeCategoriesPosition();
}    

Answer 1

您不能在 IE css 中使用 opacity。

查看本文了解更多信息

Answer 2

这是因为您在链接中嵌套了一个 div。它可能以某种方式不显示为块元素，因为它位于链接标记内。

Answer 3

我用正确的模型为您重新创建了一个示例：

Css 是：

<style type="text/css">
    #wrapper 
    {
        position:absolute;
        }
    span 
    {
       display:block;
       background-color:black;
       opacity:0.6;
       filter:alpha(opacity=60);
       width:1024px;
       height:768px;
       position:absolute;
       top:0;
       left:0;
        }
</style>

jQuery 是：

$(function () {

        $('a').hover(function () {
            $(this).find('span').fadeTo(0, 0);
        }, function () {
            $(this).find('span').fadeTo(0, 0.6);
        });

    });

Html 是：

<div id='wrapper'>
    <a href='go somwhere'>
        <span></span>
        <img src='Chrysanthemum.jpg' alt='A red flower' />
    </a>
</div>