Фоновое изображение (прозрачный 24-битный PNG) проблема исчезновения в IE7 / IE8 - PullRequest
Новая
       39

Фоновое изображение (прозрачный 24-битный PNG) проблема исчезновения в IE7 / IE8

1 голос
/ 28 октября 2011

У меня есть элемент контента, который исчезает, если пользователь находится выше определенной области. Элемент содержимого имеет фоновое изображение , которое в IE7 / IE8 имеет только большую черную границу вместо градиента.

Код анимации: 

$(function(){
 $('#TopPackets').mouseenter(function(){
 jQuery('#TopPacketsContents').animate({
   opacity: 1,
   width: 'toggle'
 }, 307, function() {
 });
 });

 $('#TopPackets').mouseleave(function(){
   jQuery('#TopPacketsContents').hide('slow');
 });
});

Теперь элемент содержимого с прозрачным фоновым изображением: 

<div id="TopPacketsContents" style="opacity: 1; display: none;">
    <!-- content -->
</div>

CSS: 

#TopPacketsContents {
 background-image: url("../images/transparentBackground.png");
 background-repeat: no-repeat;
 height: 303px;
 width: 411px;
}

Я попробовал самый быстрый ответ этой темы , но я не могу установить фон: прозрачный, потому что у меня есть фоновое изображение!

На этой странице я также пытался создать элемент-оболочку, например .

HTML 

<div id="TopPacketsContents">
    <div class="BackgroundImageWrapper">    
        <!-- content -->
    </div>
</div>

CSS 

#TopPacketsContents {
    height: 303px;
    width: 411px;
}
.BackgroundImageWrapper {
    background-image: url("../images/TopPacketsBackground.png");
    background-repeat: no-repeat;
}

Так, каковы мои варианты? Я мог бы использовать непрозрачное изображение только для IE7 / IE8 с условными комментариями (выглядело бы ужасно). Должен ли я использовать другую анимацию? Должен ли я использовать эффект наведения вместо анимации (только для IE7 / IE8)? Есть ли другие исправления?

Ответы [ 2 ]

2 голосов
/ 28 октября 2011

См. W3Schools о настройке непрозрачности для CSS:

Код CSS для этого: opacity = 1.

IE8 и более ранних версий: filter: alpha(непрозрачность = 100).

0 голосов
/ 28 октября 2011

Кажется, у меня это работает. Как я уже сказал, я удалил параметр непрозрачности: 

<script type="text/javascript">
  $(function(){
    $('#TopPackets').mouseenter(function(){
    jQuery('#TopPacketsContents').animate({
      width: 'toggle'
    }, 307, function() {
    });
    });

    $('#TopPackets').mouseleave(function(){
      jQuery('#TopPacketsContents').hide('slow');
    });
  });
</script>

Новый CSS с фильтром: 

#TopPacketsContents {
    width:411px;
    height:303px;
    background-image:url(../images/transparentBackground.png);
    background-repeat: no-repeat;
    /* IE hack */
    background:none\9; /* Targets IE only */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="path/to/images/transparentBackground.png", sizingMethod="crop");
}

следующий ответ у меня не сработал. Я взял свое решение из этого ответа .

...