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-opacity 以下功能设置不透明度

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。

see this article for more

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>

不透明图像叠加IE7的问题

3 个答案: