Прозрачность картинок png, gif. Проблемы с IE6.
что делать если нужно использовать прозрачную картинку в дизайне? Explorer не поддерживает png-формат.gif-прозрачность однотонна. Хочется использовать png формат, который поддерживает более умную прозрачность, но, весит побольше gif'а. Да ещё и возникает проблема: IE6, как и IE5, png-формат не поддерживают.
Что же делать?
1. Тупо забить. Сейчас мало кто использует IE6, и не стоит оно, чтобы об этом заботиться... Лучше подумать о любимой.
2. Решить проблему. У меня до сих пор, например, IE6, которым я пользуюсь крайне редко.
И вот решение: с помощью java script (jquery) - см. здесь: andreaseberhard.de.
Чтобы png-фон стал прозрачным, заливаем себе 2 файла:
jquery-latest.pack.js (или другой jquery поновее);
Прописываем в путь к этим файлам.
<head>
...
<script type="text/javascript" src="jquery-latest.pack.js"></script>
<script type="text/javascript" src="jquery.pngFix.js"></script>
...
</head>
И активируем тоже в .
<head>
...
<script type=“text/javascript”>
$(document).ready(function(){
$(document).pngFix();
});
</script>
…
</head>И все. Теперь png-image прозрачный в IE6 и в IE 5.5.
3. Другой способ - это flash. В swf-файле с прозрачным фоном, при настройке его публикации можно задать любой размер без потери качества, в отличие от png. Весит он мало, грузится быстро и с прозрачным фоном. А то, что не у всех в браузере включен flash, решается картинкой-заглушкой. Как раз тот прозрачный gif или png на крайний случай для тех, его усидят те, у кого не загрузится флешка.
В код вставки swf-файла в html прописываем прозрачный фон (wmode) и заглушку (img).
<object type=”application/x-shockwave-flash” data=”images/loco.swf” width=”425″ height=”368″>
<param name=”wmode” value=”transparent” />
<param name=”movie” value=”images/loco.swf” />
<img src=”images/loco.png” width=”425″ height=”368″ alt=”" />
</object>
almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.
Вы можете почитать все статьи от almix'а.
- 0 Гид по «Фотошопу» для чиновников (10.09.2013)
- 0 Inline-block vs float (22.08.2013)
- 0 Список li в две колонки (CSS) (13.03.2013)
- Как в iframe показывать только определённую область страницы (04.03.2013)
- Старт видео с определенного времени на Youtube (11.01.2013)
- В Google Maps появились планы помещений (25.11.2012)
- Отзывчивый или Адаптивный веб-дизайн (Responsive Web Design) (05.01.2013)
- Что скрывается за "дизайном" на самом деле? (16.11.2012)
- Шпаргалка по стилям живописи (30.10.2012)
- Разные стили для внутренних и внешних ссылок (07.04.2012)
- Значок рубля для сайта (25.03.2012)
- Делаем градиент к тексту, используя CSS (23.10.2011)
- Прозрачность картинок png, gif. Проблемы с IE6. (23.10.2011) ← вы тут
- Создание GIF-анимации с помощью Photoshop (23.10.2011)
RSS комментариев к этой статье.
