Javascript.RU

Кроссбраузерная прозрачность фона + jQuery

Потратил много времени чтобы побороть нежелание ослика работать с прозрачными картинками.
В интернете представлено много инструкций как сделать прозрачность в IE6 для картинок, но мне нужно было отображать картинку с прозрачностью на фоне DIV'a.

Помог вот такой вот код:

<HTML>
	<HEAD>
		<STYLE>
			.d {width:64px; height:128px; border: 1px solid black;}
		</STYLE>
		<SCRIPT src='./jquery-latest.js' type='text/javascript'></SCRIPT>
		<SCRIPT type='text/javascript'>
		$(function () {
			var isIE = $.browser.msie;
			if (!isIE) {
			    $('#test').css({'background-image' : 'url("picture.png")'});
			} else {
			    $('#test').css({'filter' : 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="picture.png")'});
			}
		});
		</SCRIPT>
	</HEAD>
	<BODY bgcolor='#CECEFF'>
		<DIV id='test' class='d'></DIV>
	</BODY>
</HTML>

UPD: Поправил пример.

0

Автор: alexpts (не зарегистрирован), дата: 1 июня, 2009 - 13:36
#permalink

На своем блоге тоже умаялся с прозрачностью, даже хочу переделать сам шаблон с нуля... Попробую ваш вариант, может быть сэкономит все таки мое время. Идея по крайней мере интересная.


Автор: ferrari (не зарегистрирован), дата: 1 июня, 2009 - 15:18
#permalink

а почему просто *filter:... в CSS не написать? * чтобы только IE понял


Автор: ZagZag, дата: 2 июня, 2009 - 09:12
#permalink

Потому-что помимо filter... IE6 подхватит и background-image, а filter + background-image = лажа c прозрачностью в IE6


Автор: Jman (не зарегистрирован), дата: 3 июня, 2009 - 13:09
#permalink

О ужас. jQuery хороший инструмент... но в умелых руках.
решение же на порядок проще, пишем в CSS

* html #test{
background-image:none;
progid:DXImageTransform.Microsoft.AlphaImageLoader(src="picture.png", sizingMethod="image" )
}

или

#test{
_background-image:none;
_progid:DXImageTransform.Microsoft.AlphaImageLoader(src="picture.png", sizingMethod="image" )
}

+ есть ещё условные комментарии

Очень жаль что вы потратили много времени на такую простую задачу. И то что вы этим решением ещё и хвастаетесь. Всё таки, прежде чем писать советы, разберитесь как следует в технологии.


Автор: Гость (не зарегистрирован), дата: 3 ноября, 2009 - 01:39
#permalink

Попробуйте с этим кодом в css пройти валидацию. Вас ждет сюрприз. Jquery проходит валидацию на раз.


Автор: Jman (не зарегистрирован), дата: 3 июня, 2009 - 13:11
#permalink

очень жаль что данная статья попала на главную. нельзя учить людей как делать не правильно.


Автор: Jman (не зарегистрирован), дата: 3 июня, 2009 - 13:18
#permalink

А если документ большой, и DOM не успеет построится, как тогда браузеру найти элемент в дереве которого нет?
Проблема есть только в MSIE6 и более ранних версиях. Так зачем же подменять бекгроунд в версиях которые нормально работают с .png (MSIE7 и MSIE8 тоже выполнят этот код)


Автор: ZagZag, дата: 3 июня, 2009 - 18:40
#permalink

Когда я искал решение этой проблемы, то ничего не нашел и решил действовать сам. На IE7 и IE8 не проверял.
Кстати, а где бы можно посмотреть как рендерится страница разными браузерами?


Автор: Jman (не зарегистрирован), дата: 4 июня, 2009 - 08:19
#permalink

Лично я пользуюсь вот такой вот штукой IETester, позволяет смотреть страницы в MSIE5,5 ; MSIE6; MSIE7; MSIE8; , только она адекватно себя ведёт когда в системе стоит MSIE7. А чтобы улучшить функционал, можно ещё поставить такой плагин на IE debugbar почти фаербаг, от разарабов IETester, кстати в последних версиях IETester и debugbar, совместимы между собой (неудивительно ведь разработчики одни и теже), так что можно посмотреть DOM, стили и скрипты под любой версией MSIE. минусов у debugbar есть несколько - он не позволяет править на лету ни DOM ни стили, он платный, но для домашнего использования достаточно нажать одну кнопку, и он становится бесплатным.

ЗЫ. в сундучке с инструментами debugbar описан, но про IETester вроде ни слова


Автор: Гость (не зарегистрирован), дата: 14 июня, 2009 - 19:03
#permalink

Вообще-то она ведёт себя НЕ адекватно, когда в системе стоит ИЕ7!!! Такой ужас показывает, уродует всё!!! Я аж испугался, думал, что щас всё переделывать придётся!!! Оказалось нужно просто версию ие сменить. Хорошо, что на оф. сайт зашёл прочитал.


 
Поиск по сайту
Другие записи этого автора
Больше записей нет. Прокомментируйте эту запись - может быть, тогда он что-нибудь еще хорошее напишет ;)
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние темы на форуме
Forum