Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Проблема с прозрачностью PNG в IE (https://javascript.ru/forum/jquery/7548-problema-s-prozrachnostyu-png-v-ie.html)

Kolyaj 08.02.2010 11:47

Цитата:

Сообщение от OMEN
малоизвестный VML

То, что вы о нём не знали, не значит, что он малоизвестный :)

OMEN 08.02.2010 13:40

так написано на сайте разработчика...

Serg_pnz 08.02.2012 10:50

Цитата:

Сообщение от OMEN (Сообщение 44003)
Очень оригинальное решение для IE6 (под IE7 не пробовал), которое работает с repeat (!!!), не использует Microsoft AlphaImageLoader, а использует малоизвестный VML от Microsoft тут: http://dillerdesign.com/experiment/DD_belatedPNG/#nogo

Удалось завести этот фильтр? У меня ошибка
Код:

Сведения об ошибке на веб-странице

Агент пользователя: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)
штамп времени: Wed, 8 Feb 2012 06:53:25 UTC


Сообщение: Недопустимый аргумент.
Строка: 42
Символ: 4
Код: 0
URI-код: http://mod002.jcase.ru/DD_belatedPNG.js


Serg_pnz 08.02.2012 11:55

Вот жесть! Если написать в свойствах родителя background: #777; (именно так, через решетку, а не к примеру red), то png, привязанные фоном в детях, начали отображаться корректно, а не черной полосой.

nikita.mmf 08.02.2012 18:26

http://chikuyonok.ru/2009/10/decor/

Serg_pnz 08.02.2012 19:28

Цитата:

Сообщение от nikita.mmf (Сообщение 156172)

Спасибо! С размерами тоже проблема.

А вот проблему с прозрачностью так и не дорешал до конца. Смотрел пример в mootools, так там тоже, пока идет анимация - вместо тени черная полоса, но потом врубаются фильтры и всё нормально... Что делать, признаться, не знаю. Ждать что ли когда все пересядут с ИЕ на нормальные браузеры... А пока забить на эти 4%

devote 08.02.2012 19:59

а вы о чем вообще? не совсем въезжаю... вроде как давно уж решено как анимировать PNG в ИЕ.

Serg_pnz 08.02.2012 21:58

devote,
и когда png беграундом и позиция absolute? ИЕ (браузеры) показывают мне что ничего не решено((

devote 08.02.2012 22:46

Цитата:

Сообщение от Serg_pnz
и когда 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>

devote 09.02.2012 00:52

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>


Часовой пояс GMT +3, время: 22:51.