Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Полупрозрачная картинка

Автор: Guest 13.11.2005, 14:42

Подскажите как поставить полупрозрачную картинку на HTML страницу. Когда я ставлю свой PNG то получается что вся прозрачность заливается белым цветом. Как быть? smile

Говорят там его как-то инклюдить надо, а вот как я не знаю smile

[color=indigo][/color] smile

Автор: CaptainFlint 13.11.2005, 15:20

Код

<script language="JavaScript">
<!--
function TransparentPNG(srcFile, width, height) {
  var agt = navigator.userAgent.toLowerCase();
  var msie = agt.indexOf("msie");
  if ((msie == -1 ) || (agt.indexOf("opera") != -1))
    return "<img src=\"" + srcFile + "\" width=" + width + " height=" + height + ">";
  var hv = parseInt(agt.substring(msie+5, msie+6));
  var lv = parseInt(agt.substring(msie+7, msie+8));
  if ((hv < 5) || ((hv == 5) && (lv < 5)))
    return "<img src=\"" + srcFile + "\" width=" + width + " height=" + height + ">";
  else
    return "<DIV ID=\"oDiv\" STYLE=\"width:" + width + "; height:" + height + "; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + srcFile + "', sizingMethod='scale');\"></div>";
}
//-->
</script>

<!-- ... тут какой-нибудь код ... -->

<!-- вставляем нашу картинку -->
<script language="javascript">document.write(TransparentPNG("Images/Title.png", 420, 66));</script>

Работает в IE 5.5+ и в Опере. В IE версии ниже 5.5 полупрозрачность PNG не поддерживается вообще никак. В остальных браузерах не проверял.

Автор: Str!pe 13.11.2005, 16:59

Попробуй GIFами там полупрозрачность выставляется.

Автор: CaptainFlint 13.11.2005, 17:47

Цитата(Stripe @ 13.11.2005, 16:59)

Попробуй GIFами там полупрозрачность выставляется.

Полупрозрачность там не выставляется! GIF позволяет сделать либо прозрачный, либо непрозрачный пиксель, а PNG может ещё и альфа-канал кодировать, что даёт возможность создания именно полупрозрачных изображений, через которые фон как бы просвечивает.

Автор: Str!pe 13.11.2005, 17:55

Константин

Твоя правда, перепутал, я Гифы через фильтры для IE делал полупрозрачнми. Кстати таким же образом я PNG под IE делал полупрозрачными.

Автор: CaptainFlint 13.11.2005, 18:55

Цитата(Stripe @ 13.11.2005, 17:55)

Кстати таким же образом я PNG под IE делал полупрозрачными.

Собственно, именно это в приведённом мной коде и делается. smile

Автор: PILOT 14.11.2005, 02:26

Можно "обмануть" посетителя сделать гиф у которого пиксели стоят в шахматном порядке:

Код


# # # # #
 # # # # 
# # # # #
 # # # #

т.е. половина есть, половины нет (фон будет просвечивать)

СУВ.

Автор: CaptainFlint 14.11.2005, 02:37

PILOT
А плавную тень так сделать слабо? smile

Например, как в заголовке на моём сайте:
http://flint-inc.ru/Images/Title.png

Автор: PILOT 14.11.2005, 02:41

Слабо... т.к. я пояснил, что именно полупрозрачная картинка. И потом что-то мне подсказывает, что png не все браузеры знают... хотя может я и не прав.

СУВ.
OFF. ИМХО: Объемный текст не самое хорошее дизайнерское решение (заезжено)...

Автор: CaptainFlint 14.11.2005, 10:01

Цитата(PILOT @ 14.11.2005, 02:41)

И потом что-то мне подсказывает, что png не все браузеры знают... хотя может я и не прав.

Возможно. Но если так рассуждать, придётся заодно думать ещё и о тех, кто под Lynx'ом сидит, и текст разделять, смотря, чтобы он под этим браузером аккуратно смотрелся... smile

Технологии развиваются, и не использовать исключительно по той причине, что 0,1% пользователей не может или не хочет ими воспользоваться - глупо. К тому же сайт - это только посредник в выдаче информации. Дизайн - это хорошо, но переоценивать его значение не стоит. Хотя, если на первый план выходит раскрутка сайта, тогда, конечно, да...

Цитата(PILOT @ 14.11.2005, 02:41)

OFF. ИМХО: Объемный текст не самое хорошее дизайнерское решение (заезжено)...

Да я на новизну и оригинальность и не претендую. Я же не дизайнер, что смог - то нарисовал (кстати, с фантазией у меня никогда хорошо не было smile

). А заказывать проф. дизайн для оформления абсолютно некоммерческого сайта - денег жалко (а банеры вставлять не хочу и не буду).
Многое уже самому мне на сайте не нравится в оформлении, но совершенно нет времени, чтобы им серьёзно заняться. smile

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