Кроссбраузерная прозрачность фона + 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: Поправил пример.
|
На своем блоге тоже умаялся с прозрачностью, даже хочу переделать сам шаблон с нуля... Попробую ваш вариант, может быть сэкономит все таки мое время. Идея по крайней мере интересная.
а почему просто *filter:... в CSS не написать? * чтобы только IE понял
Потому-что помимо filter... IE6 подхватит и background-image, а filter + background-image = лажа c прозрачностью в IE6
О ужас. 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" ) }+ есть ещё условные комментарии
Очень жаль что вы потратили много времени на такую простую задачу. И то что вы этим решением ещё и хвастаетесь. Всё таки, прежде чем писать советы, разберитесь как следует в технологии.
Попробуйте с этим кодом в css пройти валидацию. Вас ждет сюрприз. Jquery проходит валидацию на раз.
очень жаль что данная статья попала на главную. нельзя учить людей как делать не правильно.
А если документ большой, и DOM не успеет построится, как тогда браузеру найти элемент в дереве которого нет?
Проблема есть только в MSIE6 и более ранних версиях. Так зачем же подменять бекгроунд в версиях которые нормально работают с .png (MSIE7 и MSIE8 тоже выполнят этот код)
Когда я искал решение этой проблемы, то ничего не нашел и решил действовать сам. На IE7 и IE8 не проверял.
Кстати, а где бы можно посмотреть как рендерится страница разными браузерами?
Лично я пользуюсь вот такой вот штукой IETester, позволяет смотреть страницы в MSIE5,5 ; MSIE6; MSIE7; MSIE8; , только она адекватно себя ведёт когда в системе стоит MSIE7. А чтобы улучшить функционал, можно ещё поставить такой плагин на IE debugbar почти фаербаг, от разарабов IETester, кстати в последних версиях IETester и debugbar, совместимы между собой (неудивительно ведь разработчики одни и теже), так что можно посмотреть DOM, стили и скрипты под любой версией MSIE. минусов у debugbar есть несколько - он не позволяет править на лету ни DOM ни стили, он платный, но для домашнего использования достаточно нажать одну кнопку, и он становится бесплатным.
ЗЫ. в сундучке с инструментами debugbar описан, но про IETester вроде ни слова
Вообще-то она ведёт себя НЕ адекватно, когда в системе стоит ИЕ7!!! Такой ужас показывает, уродует всё!!! Я аж испугался, думал, что щас всё переделывать придётся!!! Оказалось нужно просто версию ие сменить. Хорошо, что на оф. сайт зашёл прочитал.
Отправить комментарий
Приветствуются комментарии:- Полезные.
- Дополняющие прочитанное.
- Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.Для остальных вопросов и обсуждений есть форум.