Как я делаю картинки-png
Дано
Сайта aspekt-kor.com. Справа фотографии. Нужно делать их пнг. Потому что неизвестно сколько справа будет текста и коричневый фон может как увеличиваться, так и уменьшаться.
Картинка:

Решение
Скачиваем: файл Actions для фотошопа.
Вставляем эту картинку в новое окно.
Выбираем в панели actions действие transparenсy (!! фон должен быть прозрачным) и жмем пуск.
В результате должно получится два слоя:

сохраняем как foto.png

сохраняем как foto.gif
Теперь вставляем его в html.
<div class="foto"><div><!-- --></div></div>
И пишем стили для css
1 2 3 4 | <style type="text/css"> .foto {background-image:url(картинка-png); width:301px; height:341px} .foto div {background-image:url(картинка-gif); width:301px; height:341px} </style> |
И пишем стили для ie5,6
1 2 3 4 5 | <!--[if lt IE 7]> <style type="text/css"> .foto {background-image:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=картинка-png,sizingMethod=crop)} </style> < ![endif]--> |
Преимущества такого способа в том, что в ie5 все очень неплохо смотрится
Результат смотреть тут или тут
Написано: Апрель 6th, 2007 | Рубрика: css | Комментариев (7)
Спасибо, интересная статья
Круть )
Если ты начинающий верстальщик, то нормально… но только не замарачивайся на этом и больше экспериментируй
Кажется в последнем коде должно быть не
, а
Т.е. пробел немного лишний
Сорри теги “поедены” в комментарии.
Я хотел сказать, что в последнем коде пробел перед
![endif]–
не нужен, правильно без пробела
Ну что ж, неплохой способ… Главное – что эффект достигнут. А насчёт пробела ЭФНО прав
Комментарий