Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Прозрачный блок


Автор: Aliance 16.5.2005, 00:24
Много раз видел прозрачные блоки с текстом. Но все небыло времени глянуть код.
Хочу знать алгоритм их действия:
Это сделано с помощью filter или background-color: transparent?
Первое по известной причине использовать нехочу.
А второе пробал - неполучалось =/

Автор: dm9 16.5.2005, 00:29
Что такое "прозрачные блоки с текстом"?

Автор: Aliance 16.5.2005, 00:47
Прозрачный блочный элемент. Т.е. имеющий свой фон. цвет, но он настолько слаб что сквозь него виден текст того,что находится за ним.
Например, как в последней версии миранды (клиент для ICQ)...

Автор: dm9 16.5.2005, 00:53
Что такое Миранда, я не знаю.
Полупрозрачный слой можно попробовать сделать при помощи png, на который класть сверху текст вторым слоем.
Чисто прозрачный - просто, это background: transparent;

Добавлено @ 00:54
Кстати, background-color: transparent задаётся по умолчанию...

Автор: oxygen 16.5.2005, 01:12
Цитата(dm9 @ 16.5.2005, 00:53)
Полупрозрачный слой можно попробовать сделать при помощи png

опера и мозилла поймут, а вот осла надо еще заставить

Код

  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='1.png');

это CSS для объекта, в котором нужно использовать бэкграунд с поддержкой альфа канала (читай полупрозрачный).

Автор: Aliance 16.5.2005, 14:10
Нет, все не то. Как науду примеры - покажу...
Сейчас что-то как они нужны - их потерял smile

Автор: oxygen 16.5.2005, 21:13
нужно так?
http://www.icweb.ru/m/tr/2.html

Автор: Aliance 16.5.2005, 21:16
Я же сказал без фильтров...

Автор: oxygen 16.5.2005, 21:30
Aliance, в Опере и Лисе этот фильтр не нужен. Он нужен только для осла. Соотв => работает во всех браузерах.

Автор: Aliance 16.5.2005, 21:59
Во-первых я знаю что это можно без фильтров - не хочу их использовать :-)
Во-вторых, я не знаю что такое “осел” smile Говори понятнее smile

ЗЫ: фильтры ИЕ онли, за небольшим исключением ж...

Автор: oxygen 16.5.2005, 22:32
Aliance
повторяю еще раз smile

Это будет работать в Opera и Mozilla Firefox БЕЗ фильтра.
В Internet Explorer НЕТ поддержки альфа канала, потому ее нужно включить фильтром.

В итоге имеем: в первых двух вышеназванных браузерах работает как часы с простым файлом PNG без всякого CSS фильтра, в IE работает с фильтром. То есть работает во всех браузерах. За исключением старых версий.

Автор: Aliance 16.5.2005, 22:48
Цитата(oxygen @ 16.5.2005, 23:32)
Это будет работать в Opera и Mozilla Firefox БЕЗ фильтра.

Почему? Картинка сама прозрачная?

Автор: oxygen 16.5.2005, 22:49
Цитата(Aliance @ 16.5.2005, 22:48)
Почему? Картинка сама прозрачная?

да

Автор: dm9 16.5.2005, 22:49
PNG имеет 256 степеней прозрачности.
GIF только две - полностью прозрачный или полностью непрозрачный.

Автор: dm9 16.5.2005, 23:23
oxygen, я попробовал применить фильтр.
http://dm9.ru/vingrad/examples/html/transparentimage/
Ты видишь более красивое решение? Мне не нравится применение background-image: "none";, который будет воспринят только ИЕ.

Потом, это не работает под ИЕ при использовании
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Автор: oxygen 16.5.2005, 23:32
Цитата(dm9 @ 16.5.2005, 23:23)
oxygen, я попробовал применить фильтр.
http://dm9.ru/vingrad/examples/html/transparentimage/
Ты видишь более красивое решение? Мне не нравится применение background-image: "none";, который будет воспринят только ИЕ.

я ведь то же самое и советовал.


Цитата(dm9 @ 16.5.2005, 23:23)
Потом, это не работает при использовании
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

потому что IE пока не поддерживает альфа канал, уж ничего с этим не поделать. Либо так либо никак. В седьмой версии обещают поддержку.


Цитата(dm9 @ 16.5.2005, 23:23)
(Под ИЕ не работает)

с таким DOCTYPE или вообще?

Автор: dm9 16.5.2005, 23:36
Цитата(oxygen @ 17.5.2005, 00:32)
я ведь то же самое и советовал.


Ну, я не спорю. Твой метод решил опробовать. Я не знаток IE-only фильтров smile

Не работает именно с доктайпом XHTML1.0 Доктайп других версий HTML не пробовал.
Без доктайпа (как в примере) всё хорошо.

Добавлено @ 23:37
Я спрашивал, можно ли построить CSS более красиво.

Автор: oxygen 16.5.2005, 23:42
Цитата(dm9 @ 16.5.2005, 23:36)
Я спрашивал, можно ли построить CSS более красиво.

вот это вряд ли, потому что фильтр сугубо МСовский

Автор: Aliance 16.5.2005, 23:59
Непонимаю, если картинка прозрачная - она хоть на Макинтоше прозрачной будет, или я не прав? smile

Автор: dm9 17.5.2005, 00:04
Попроси Кота мою демку тестануть. Или давай сам попрошу smile Интересно, правда smile

Автор: oxygen 17.5.2005, 00:19
Цитата(Aliance @ 16.5.2005, 23:59)
Непонимаю, если картинка прозрачная - она хоть на Макинтоше прозрачной будет, или я не прав?

неа. Чтобы отобразить полупрозрачность нужна поддержка альфа канала.
Это не гиф smile

Автор: dm9 19.5.2005, 16:13
Domestic Cat протестировал на МАКе, за что ему громадное спасибо smile

Цитата(Domestic)
В общем так: это сработало на Лисе и Сафари [Под МАК], а в ИЕ Mac показало только текст


Так что так smile

Автор: Aliance 19.5.2005, 21:18
Спасибо коту smile)

Цитата(oxygen @ 17.5.2005, 01:19)
Чтобы отобразить полупрозрачность нужна поддержка альфа канала.

Мдя...это я ступил ))

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)