loading...

Авторизация ...

Имя пользователя :
Пароль :
я всё забыл!

В помощь вебмастеру » CSSПрозрачный PNG и Internet Explorer

Написал CSR, 11 марта 2008 | 23 комментария | рейтинг новости не нравится   +62   нравится Версия для печати
Вот решил поделится с миром одной полезной фичей, может для кого-то уже слышал о ней.

Иногда при создании дизайна для сайта встает вопрос о размещении на странице прозрачного PNG для придания сайту изысканности. Но проблема в том, что детище Мелкософта не распознает в формате PNG24 прозрачности, и просто заливает его белым фоном. Решить эту проблему очень просто.

Для этого нам потребуется:
- Скрипт pngbehavior.htc
- Прозрачная картинка blank.gif

Итак, приступим.

- Размещаем наш скрипт и gif, например, в папке images.

- Открываем pngbehavior.htc в блокноте, там в восьмой строке пишем путь к нашему GIF'у:

(var blankSrc = "../images/blank.gif")

- Cоздаем CSS-файл, в котором пишем класс png:

.png {behavior: url(../images/pngbehavior.htc);}

- Вставляем в html-документ PNG и приписываем ему только что созданный класс, обязательно указав ширину и высоту картинки, чтобы IE не сжал её в точку:

<img src="../images/image.png" alt="Прозрачный png" class="png" width="300" height="200">

- Открываем только что созданный html и прыгаем от радости, любуясь на прозрачные тени

Страничку с демо можно посмотреть на сайте автора:
_http://webfx.eae.net/dhtml/pngbehavior/demo.html


В архиве лежит скрипт, gif, и ещё пара советов и дополнений чтоб можно было ставить png на фон и т.п.

Скачать: Вы не можете скачивать файлы с нашего сервера



Комментарии пользователей

  Экспорт комментариев в RSS
 Сортировать по рейтингу, по дате

Написал bezzon, 11 марта 2008 в 12:18 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 0, Гости
Карма: ±
демо не работает!! не понял в чем прикоЛ!!!

Написал Summer :), 11 марта 2008 в 12:23 плохой комментарий   0   хороший комментарий
Новостей: 1, комментариев: 36, Изгнанные
Карма: -2±
bezzon, демо работает. Смотри лучше!
Автор, ну Америку ты не открыл :)), может кому и пригодится.

Написал Worm, 11 марта 2008 в 12:49 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 0, Гости
Карма: ±
кстате вроде уже было тут

Написал Fillosoff, 11 марта 2008 в 12:59 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 0, Гости
Карма: ±
Когда писал свой пост о :hover здесь же пару дней назад, то думал и об прозрачности .png написать с помощью behavior, короче, вышеописанный способ. но сколько не проверял, у меня он не заработал. просто выдает крестик на месте картинки и все тут. разными способами пробовал подключение.
но т.к. результат всегда был отрицательный - то не стал здесь выкладывать.
может, у кого и сработает, тогда отпишитесь здесь. для меня это актуально. т.к. одна картинка так и стоит на мерзком белом фоне в IE6. и пока никак ее не удается сделать прозрачной.
=====================================

Все ж, решил не лениться, попробовал поставить еще раз - все сработало!! моя ошибка была в том, что я файл pngbehavior.htc кидал в папку css, а надо было в папку images. и пути, соответственно, абсолютные прописать, а не относительные.

CSR, спасибо, что еще раз заставил меня совершить сей финт ушами. а то меня "шапка" до инфаркта доводила, когда смотрел на нее через IE6 smile

P.S. сразу напишу для тех, кто захочит выразиться по поводу "тормозов" при использовании бихавиора. у меня их сейчас 2 - для png и для hover. в IE5.5 - IE6 - IE7 тормозов не наблюдаю. но от многого зависит, поэтому, не факт, что у всех так же будет.

Написал CSR, 11 марта 2008 в 15:34 плохой комментарий   0   хороший комментарий
Новостей: 40, комментариев: 310, Пользователи
Карма:
Цитата: Summer :)
Автор, ну Америку ты не открыл

Ну так я на это и не претендовал))

Цитата: bezzon
демо не работает!! не понял в чем прикоЛ!!!

вот-вот, ты просто не понял смысл зачем это надо, читай внимательнее

Fillosoff,
я сталкивался с крестиком только когда путь до blank'a неправильно прописал, а так всё норм.

Написал JC, 11 марта 2008 в 15:45 плохой комментарий   0   хороший комментарий
Новостей: 1, комментариев: 131, Изгнанные
Карма:
Спасибо, я это знал. Но новичкам думаю пригодится.

Написал nkslim, 11 марта 2008 в 16:03 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 0, Гости
Карма: ±
спасибо конечно , но где-то это видел!!! 59

Написал grimweb, 11 марта 2008 в 16:34 плохой комментарий   0   хороший комментарий
Новостей: 6, комментариев: 446, Модератор
Карма: 23±
а я нигде еще не видел... вот... спс, автор!

Написал Hamer, 11 марта 2008 в 16:46 плохой комментарий   0   хороший комментарий
Новостей: 42, комментариев: 2186, Изгнанные
Карма: 50±
полезно. пригодится.

Написал fuzion, 11 марта 2008 в 17:23 плохой комментарий   0   хороший комментарий
Новостей: 7, комментариев: 346, Пользователи
Карма:
молодцааа... спосибоо! нужно очень, даже както не додумался сам найти!

Написал PoMaH, 11 марта 2008 в 19:50 плохой комментарий   0   хороший комментарий
Новостей: 2, комментариев: 215, Пользователи
Карма:
opiatze pravelnyi podhod s extentionsami vsio reshajet dlia IE. ruki prosto priamyje nado imet ctob jego pravelno propisat.

Написал Vano, 12 марта 2008 в 23:45 плохой комментарий   0   хороший комментарий
Новостей: 8, комментариев: 272, Пользователи
Карма: 18±
Что-то я не вижу в этом всём шаманстве с бубном смысла, всё что нужно это файл pngfix.js залитый в папочку со стилями и этот код в хеде
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="/templates/Simple/css/pngfix.js"></
script>
<![endif]-->

И всё отлично работает без всяких классов..

Написал CSR, 13 марта 2008 в 11:40 плохой комментарий   0   хороший комментарий
Новостей: 40, комментариев: 310, Пользователи
Карма:
Vanes,
хм, и вправду работает)) спасибо, буду и такой способ знать victory

только вот ие6 тормозит чуток, пишет
Загрузка рисунка .../logo.png

до половину доходит и дальше ни в какую...

Написал Darkman, 17 марта 2008 в 18:02 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 0, Гости
Карма: ±
ооо спасибо! 4
А этот способ работает на всех браузерах? (Opera и тд.) pardon

Написал CSR, 19 марта 2008 в 16:52 плохой комментарий   0   хороший комментарий
Новостей: 40, комментариев: 310, Пользователи
Карма:
Darkman,
гы... опера и т.д. итак понимают прозрачность)) а скрипт нужен только для IE, чтоб и он понял...

Написал Darkman, 20 марта 2008 в 17:43 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 0, Гости
Карма: ±
Спасибо за ответ! Прост незнал! (пользуюсь IE) pardon

Написал Versetti, 28 марта 2008 в 06:44 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 0, Гости
Карма: ±
Цитата: CSR
а скрипт нужен только для IE, чтоб и он понял...

Только для IE6 и ниже. 7-ой сам всё понимает.

Написал Bop4yH, 20 апреля 2008 в 11:17 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 0, Гости
Карма: ±
А как сделать, чтобы фон в таблице тоже был прозрачным?!?!? Все перепробовал, не работает. Когда картинку вставляю, она прозрачная, а вот на фоне этаже картинка нет.

Написал 4uupii, 25 апреля 2008 в 14:13 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 0, Гости
Карма: ±
ВОТ назрел вопросец ... Как сделать чтоб это на фон поставить?
Пробывал пробывал и не как не хочет оно работать!!!

Написал xoxoxo, 21 августа 2008 в 22:42 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 0, Гости
Карма: ±
Автор молодца!
Я то всегда ломал над этим голову! И приходилось отказываться от многих дизайнов!

Написал nzerg, 2 сентября 2008 в 00:23 плохой комментарий   +1   хороший комментарий
Новостей: 0, комментариев: 0, Гости
Карма: ±
Для фона и таблиц это не работает, за то работает это
_www.tigir.com/alpha_png.htm
это нечто, у меня заработало на DLE)

Написал Daimond, 13 сентября 2008 в 17:46 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 0, Гости
Карма: ±
nzerg,
Спасибо!

Написал Havt, 26 июля 2009 в 19:42 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 0, Гости
Карма: ±
не работает

Информация



Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.
Анализ Тиц и PR сайта

[removed][removed] [removed] (adsbygoogle = window.adsbygoogle || []).push({}); [removed]