Проблема с прозрачностью PNG в IE
Приветствую знатоков.
Такая проблема: после загрузки страницы показываю всплывающее окошко, обрамленное рамкой из рисунков png с прозрачностью. png прописаны в css в атрибуте background-image, используется "растяжка" png (repeat). Во всех браузерах всё ОК, а вот IE (на семерке пробовал) не хочет корректно отобразить прозрачность у рамки. Пробовал всякие инкарнации png-fix'ов, в том числе и те, что работают с background'ом в css: ничего не помогает, т.к. моя рамка динамически выводится на странице (если рамку включить в текст страницы, то всё ОК). Приходится для IE в качестве рамки использовать gif-ы. Может есть простенькое решение данной проблемы или для кого-то это уже не проблема? Буду признателен. |
А ссылку можно?
|
вот сслыка http://zodchy.net/mod_stickyhtml_OMEN_DEMO
|
|
Цитата:
|
OMEN,
разберитесь, как работают эти фиксы, будет понятно. В частности, одно из решений вашей проблемы руками прописывать в CSS свойство filter для IE. |
ок. направление ясно. но filter для IE не работает с растяжкой repeat фоновых изображений, а у меня рамка как раз так и организована. но все равно thanks!
|
OMEN,
а это в IE7 траблы или в IE6? |
В IE7 и скорее всего в IE8. Про IE6 я ваапче молчу.
|
Очень оригинальное решение для IE6 (под IE7 не пробовал), которое работает с repeat (!!!), не использует Microsoft AlphaImageLoader, а использует малоизвестный VML от Microsoft тут: http://dillerdesign.com/experiment/DD_belatedPNG/#nogo
|
Цитата:
|
так написано на сайте разработчика...
|
Цитата:
Код:
Сведения об ошибке на веб-странице |
Вот жесть! Если написать в свойствах родителя background: #777; (именно так, через решетку, а не к примеру red), то png, привязанные фоном в детях, начали отображаться корректно, а не черной полосой.
|
|
Цитата:
А вот проблему с прозрачностью так и не дорешал до конца. Смотрел пример в mootools, так там тоже, пока идет анимация - вместо тени черная полоса, но потом врубаются фильтры и всё нормально... Что делать, признаться, не знаю. Ждать что ли когда все пересядут с ИЕ на нормальные браузеры... А пока забить на эти 4% |
а вы о чем вообще? не совсем въезжаю... вроде как давно уж решено как анимировать PNG в ИЕ.
|
devote,
и когда png беграундом и позиция absolute? ИЕ (браузеры) показывают мне что ничего не решено(( |
Цитата:
<!DOCTYPE html>
<html>
<head>
<title>...</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body style="background-image: url('http://sites.google.com/site/jaimemontoya/Sample07.jpg');">
<button onclick="jQuery('div.block').fadeOut(1000);">fadeOut</button>
<button onclick="jQuery('div.block').fadeIn(1000);">fadeIn</button>
<div class="block">
<div style="background-image: url('http://nc-handyman.com/images/bird-forward-back.png'); width: 540px; height: 246px;"></div>
<img src="http://nc-handyman.com/images/bird-forward-back.png" width="540" height="246" alt="" />
</div>
<script type="text/javascript">
if ( !jQuery.support.opacity ) {
// Сохраним оригинальный метод
jQuery.cssHooks.opacity.originalSet = jQuery.cssHooks.opacity.set;
// Меняем на свой собственный
jQuery.cssHooks.opacity.set = function( elem, value ) {
var rAlphaLoader = /(^|\s).*AlphaImageLoader\([^)]*\)/i,
elems = jQuery( elem ).children();
elems[ elems.length++ ] = elem;
elems.each(function(){
var s = null,
currentStyle = this.currentStyle,
bgImg = currentStyle && currentStyle.backgroundImage || this.style.backgroundImage || "",
filter = currentStyle && currentStyle.filter || this.style.filter || "";
// подготавоиваем все PNG для дальнейшей работы.
if ( this.nodeName === "IMG" && /\.png$/i.test( this.src ) ) {
// подготавливаем тег IMG
s = this.src;
// для ИЕ < 8 нужно указать путь к файлу blank.gif
this.src = "data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
} else if ( bgImg && bgImg !== 'none' && ( s = bgImg.match( /^url[("']+(.*\.png)[)"']+$/i ) ) ) {
// подготавливаем другие теги если у них есть фон в виде PNG рисунка
s = s[ 1 ];
this.style.backgroundImage = 'none';
}
if ( s ) {
s = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + s + "', sizingMethod='scale')";
this.style.filter = rAlphaLoader.test( filter ) ? filter.replace( rAlphaLoader, " " + s ) : filter + " " + s;
}
});
// Вызываем дефолтный метод
jQuery.cssHooks.opacity.originalSet.apply( this, arguments );
}
}
</script>
</body>
</html>
|
Serg_pnz,
я так понял что-то в этом роде надо?:
<!DOCTYPE html>
<html>
<head>
<title>...</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://code.spb-piksel.ru/jquery.supcss-0.4.0.min.js"></script>
</head>
<body style="background-image: url('http://sites.google.com/site/jaimemontoya/Sample07.jpg');">
<button onclick="jQuery('div').fadeOut(1000);">fadeOut</button>
<button onclick="jQuery('div').fadeIn(1000);">fadeIn</button>
<div>
<div style="position: absolute; border-radius: 1px; background-image: url('http://nc-handyman.com/images/bird-forward-back.png'); width: 100%; height: 420px;"></div>
</div>
</body>
</html>
|
Вложений: 1
devote,
обязательно посмотрю оба примера. А я собственно вот о чем http://mod001.jcase.ru/ Если нажать "Загрузить" под ХР в ИЕ7-8, то в момент анимации тень идет сплошь черная и только по complite становится нормальной... (см. вложение) Я уже весь мозг вынес себе... И еще вопрос всплыл: jquery 1.6.0 не кроссбраузерно определяет scrollTop? |
Цитата:
|
| Часовой пояс GMT +3, время: 07:28. |