Проблема с непрозрачным изображением наложения IE7 - PullRequest
Новая
       24

Проблема с непрозрачным изображением наложения IE7

1 голос
/ 17 мая 2011

У меня проблемы с установкой непрозрачного наложения div на изображение в IE7. Любой другой браузер (примечание: 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 это альфа-непрозрачность Следующая функция устанавливает непрозрачность 

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();
}

Ответы [ 3 ]

2 голосов
/ 17 мая 2011

Вы не можете использовать opacity в IE css.

см. Эту статью для более

1 голос
/ 17 мая 2011

Я воссоздал для вас образец с правильной моделью:

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>
1 голос
/ 17 мая 2011

Это потому, что вы вкладываете div в ссылку. Вероятно, он почему-то не отображается как элемент блока, потому что он внутри тега ссылки.

...