VPF::Полупрозрачная image - Форум программистов

Unlimited

Дата 3.11.2004, 00:33 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 207
Регистрация: 9.7.2003
Где: Германия

Репутация: нет
Всего: нет

Приветик всем!!!

У меня возникла проблема:
мне необходимо сделать полупрозрачную динамическую!!!! картинку на которой распологается текс и это всё находится на background-image. Т.е. текст может быть различной длины и поэтому "полупрозрачная динамическая картинкая " должна соответствовать длине текста.

За ранее благодарен!!!!

dr.ZmeY

Дата 3.11.2004, 00:43 (ссылка)

(нет голосов)

Загрузка ...

Политолог

Профиль
Группа: Участник Клуба
Сообщений: 3892
Регистрация: 26.3.2002
Где: ..::STALINGRAD::. .

Репутация: 2
Всего: 60

Т.е.? в зависимости от заполнения текста фон под ним заполняется картинкой?
Ну это можно реализовать стилем, а в качестве заливки в стиле использовать полупрозрачную png - картинку, сейчас её порддерживают все браузеры... Стиль этот применить к этому тексту.

Если использовать альфа-канал, то его поддерживают только ИЕ... Можно конечно придумать ява-скрипт, но это замороченее и не факт, что будет поддреживаться корректно всеми браузерами...

Я верно понял вопрос?

--------------------

Мой блог в ЖЖ

Gold Dragon

Дата 3.11.2004, 09:22 (ссылка)

(нет голосов)

Загрузка ...

Призрачный

Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: 9
Всего: 71

А если на background страницы повесить background таблицы, а уже в ячейки сам текст. Что типа такого<html>

HTML

<head>
</head>
<body background="fon1.gif">
....
<table background="fon2.gif">
<tr>
<td>Текст</td>
</tr>
</table>
....
</body>
</html>

Наверное ещё и background в ячейке сделать

Это сообщение отредактировал(а) Red Dragon - 3.11.2004, 09:23

--------------------

Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!

Се ля ви

Дата 3.11.2004, 10:05 (ссылка)

(нет голосов)

Загрузка ...

Java/SOAрхитектор

Профиль
Группа: Модератор
Сообщений: 2016
Регистрация: 5.6.2004
Где: place without tim e and space

Репутация: 1
Всего: 127

Цитата(dr @ 3.11.2004, 00:43)

Если использовать альфа-канал, то его поддерживают только ИЕ

По-моему, наоборот - его поддерживают Opera и Mozilla, а IE напрямую не поддерживает. Для PNG по крайней мере. Сама по себе прозрачность для Mozilla задаётся свойством стилей -moz-opacity: 25% (задаст 25-процентную прозрачность), задаваемым в процентах, а для IE - filter:alpha(opacity=25) (тот же эффект) - для IE 5.0 и filter:progid:DXImageTransform.Microsoft.Alpha(opacity=25) - для IE 5.5 и выше. Но в стилях не существует явного селектора, нацеленного на фон элемента... Но можно попробовать обратиться косвенно - можно применить прозрачность целеком к, скажем, слою, для которого задать бэкграунд - тогда будет прозрачным и текст, который ты хочешь поместить поверх текста. После этого можно обратиться к тексту напрямую (скажем, заключив его в span и обратившись к нему) и задать прозрачность 100% (то есть, отсутствие прозрачности, а просто показ элемента).

Как это сделать проще - я не знаю. А так же не знаю, сработает ли это - но поидее должно...

Надо ли говорить, что я считаю такие выкрутасы жутким извращением? :hmmm

Это сообщение отредактировал(а) Се ля ви - 3.11.2004, 10:06

--------------------

)
(
[_])
проф. блог

Кролики думали, что занимаются любовью, а на самом деле их просто разводили...

Ignat

Дата 24.5.2005, 17:16 (ссылка)

(нет голосов)

Загрузка ...

Флудератор

Профиль
Группа: Экс. модератор
Сообщений: 4030
Регистрация: 19.4.2004
Где: غيليندزيك مدينة

Репутация: нет
Всего: 73

Сорри, что реанимировал тему. Потребовалось использование полупрозрачного PNG.
Извращались тут с совместимостью и выродили следующее:

Код


<DIV ID="oDiv" STYLE="height:206; width:134; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='some.png',sizingMethod='scale');">
</DIV><img src="some.png" width="134" height="206" alt="" style=" filter:alpha(opacity = '0'); ">

Проверили в IE6SP1, FF 1.0.4, Opera 7, Opera 8. Корректно.
Может кто-нибудь проверить это в других броузерах?
Особенно интересуют IE5, IE6 (без сервиспаков), IE6SP2.

--------------------

Теперь при чем :P

Ignat

Дата 24.5.2005, 18:25 (ссылка)

(нет голосов)

Загрузка ...

Флудератор

Профиль
Группа: Экс. модератор
Сообщений: 4030
Регистрация: 19.4.2004
Где: غيليندزيك مدينة

Репутация: нет
Всего: 73

зип для проверки, там хтмл и пинг полупрозрачный.
Серая тень на красном фоне.

Присоединённый файл ( Кол-во скачиваний: 23 )

test.zip

--------------------

Теперь при чем :P

Aliance

Дата 24.5.2005, 18:52 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 2
Всего: 137

Ignat
IE 6.0 SP2 - ok

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Ignat

Дата 24.5.2005, 18:54 (ссылка)

(нет голосов)

Загрузка ...

Флудератор

Профиль
Группа: Экс. модератор
Сообщений: 4030
Регистрация: 19.4.2004
Где: غيليندزيك مدينة

Репутация: нет
Всего: 73

Aliance, спасибо!

А вот на IE 5.0 не работает. sergej.z проверил.

--------------------

Теперь при чем :P

Aliance

Дата 24.5.2005, 20:44 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 2
Всего: 137

Ignat
У меня есть ИЕ 5.0 - но на другом компе, там и-нета нет... как подключу проверю на ИЕ 5.0 (СП1, кажется) + Опера7 + Мозилла + MyIE

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

dm9

Дата 24.5.2005, 21:33 (ссылка)

(нет голосов)

Загрузка ...

Дмитрий Копытин

Профиль
Группа: Vingrad developer
Сообщений: 3876
Регистрация: 22.7.2002
Где: Москва

Репутация: 29
Всего: 137

http://forum.vingrad.ru/index.php?showtopic=52197&st=15

Твой вариант под Opera 6 работает.

Это сообщение отредактировал(а) dm9 - 24.5.2005, 21:38

Gold Dragon

Дата 25.5.2005, 07:50 (ссылка)

(нет голосов)

Загрузка ...

Призрачный

Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: 9
Всего: 71

Ignat
покажи скриншот того что должно быть на экране

--------------------

Ignat

Дата 26.5.2005, 11:35 (ссылка)

(нет голосов)

Загрузка ...

Флудератор

Профиль
Группа: Экс. модератор
Сообщений: 4030
Регистрация: 19.4.2004
Где: غيليندزيك مدينة

Репутация: нет
Всего: 73

скрЫншот:

Присоединённый файл ( Кол-во скачиваний: 27 )

examp.gif

--------------------

Теперь при чем :P

Gold Dragon

Дата 26.5.2005, 11:44 (ссылка)

(нет голосов)

Загрузка ...

Призрачный

Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: 9
Всего: 71

Вроде везде работает

а что filter теперь все начали поддерживать?

--------------------

Ignat

Дата 26.5.2005, 12:00 (ссылка)

(нет голосов)

Загрузка ...

Флудератор

Профиль
Группа: Экс. модератор
Сообщений: 4030
Регистрация: 19.4.2004
Где: غيليندزيك مدينة

Репутация: нет
Всего: 73

Цитата(Red @ 26.5.2005, 12:44)

а что filter теперь все начали поддерживать?

Не-а, только ИЕ smile

Добавлено @ 12:09

Цитата(dm9 @ 24.5.2005, 22:33)

Твой вариант под Opera 6 работает.

dm9, спасибо!

Цитата(dm9 @ 24.5.2005, 22:33)

http://forum.vingrad.ru/index.php?showtopic=52197&st=15

А там какой вариант был?

--------------------

Теперь при чем :P

Urod

Дата 6.6.2005, 09:48 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 376
Регистрация: 10.4.2004
Где: Москва

Репутация: нет
Всего: -1

Помгите! Есть такая ячейка. Необходимо на уже имеющися фон вставить картинку (тоже фоном)! Пчитала тему, не пойму, куда вставить конструкцию

Код


<DIV ID="oDiv" STYLE="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../Templates/Doma_gory/fon_drugie_raboty.png.',sizingMethod='scale');">
</DIV><img src="../Templates/Doma_gory/fon_drugie_raboty.png" alt="" style=" filter:alpha(opacity = '0'); ">

Код


<tr >
    
    <td class="qwe" style="background-repeat: repeat-x; background-image: url(../Templates/Doma_gory/fon.jpg);">
      <p> &Auml;&icirc;&ntilde;&ograve;&agrave;&ograve;&icirc;&divide;&iacute;&icirc; &divide;&agrave;&ntilde;&ograve;&icirc; &igrave;&ucirc; &ntilde;&ograve;&agrave;&euml;&ecirc;&egrave;&acirc;&agrave;&aring;&igrave;&ntilde;&yuml; &ntilde; &ccedil;&agrave;&auml;&agrave;&divide;&agrave;&igrave;&egrave;, &eth;&aring;&oslash;&aring;&iacute;&egrave;&aring; &ecirc;&icirc;&ograve;&icirc;&eth;&ucirc;&otilde; &aacute;&ucirc;&ntilde;&ograve;&eth;&icirc; &eth;&aring;&agrave;&euml;&egrave;&ccedil;&oacute;&aring;&igrave;&icirc; &ntilde; &iuml;&icirc;&igrave;&icirc;&ugrave;&uuml;&thorn; &oacute;&euml;&oacute;&atilde; &iuml;&eth;&icirc;&igrave;&ucirc;&oslash;&euml;&aring;&iacute;&iacute;&ucirc;&otilde; &agrave;&euml;&uuml;&iuml;&egrave;&iacute;&egrave;&ntilde;&ograve;&icirc;&acirc;. &Yacute;&ograve;&icirc; &igrave;&icirc;&atilde;&oacute;&ograve; &aacute;&ucirc;&ograve;&uuml;: &icirc;&aacute;&egrave;&acirc;&ecirc;&agrave; &aacute;&agrave;&euml;&ecirc;&icirc;&iacute;&agrave; &ntilde; &iacute;&agrave;&eth;&oacute;&aelig;&iacute;&icirc;&eacute; &ntilde;&ograve;&icirc;&eth;&icirc;&iacute;&ucirc;, &oacute;&auml;&agrave;&euml;&aring;&iacute;&egrave;&aring; &auml;&aring;&eth;&aring;&acirc;&agrave;, &ccedil;&agrave;&ecirc;&eth;&ucirc;&acirc;&agrave;&thorn;&ugrave;&aring;&atilde;&icirc; &Acirc;&agrave;&oslash;&aring; &icirc;&ecirc;&iacute;&icirc; (&euml;&egrave;&aacute;&icirc; &iuml;&eth;&aring;&auml;&ntilde;&ograve;&agrave;&acirc;&euml;&yuml;&thorn;&ugrave;&aring;&atilde;&icirc; &oacute;&atilde;&eth;&icirc;&ccedil;&oacute; &ouml;&aring;&euml;&icirc;&ntilde;&ograve;&iacute;&icirc;&ntilde;&ograve;&egrave; &ecirc;&eth;&icirc;&acirc;&euml;&egrave; &Acirc;&agrave;&oslash;&aring;&atilde;&icirc; &auml;&icirc;&igrave;&agrave;)&egrave;&euml;&egrave; &divide;&agrave;&ntilde;&ograve;&egrave; &aring;&atilde;&icirc; &ecirc;&eth;&icirc;&iacute;&ucirc;, &iuml;&aring;&eth;&aring;&acirc;&icirc;&auml; &ntilde;&ograve;&eth;&aring;&euml;&icirc;&ecirc; &oacute;&euml;&egrave;&divide;&iacute;&ucirc;&otilde; &divide;&agrave;&ntilde;&icirc;&acirc;, &oacute;&ecirc;&eth;&agrave;&oslash;&aring;&iacute;&egrave;&aring; &egrave;&atilde;&eth;&oacute;&oslash;&ecirc;&agrave;&igrave;&egrave; &aring;&euml;&icirc;&ecirc;, &eth;&agrave;&ntilde;&iuml;&icirc;&euml;&icirc;&aelig;&aring;&iacute;&iacute;&ucirc;&otilde; &iacute;&agrave; &oacute;&euml;&egrave;&ouml;&agrave;&otilde; &atilde;&icirc;&eth;&icirc;&auml;&agrave; &egrave; &igrave;&iacute;&icirc;&atilde;&egrave;&aring; &auml;&eth;&oacute;&atilde;&egrave;&aring;.</p>
      <p>&Iacute;&icirc; &yacute;&ograve;&egrave;&igrave; &acirc;&icirc;&ccedil;&igrave;&icirc;&aelig;&iacute;&icirc;&ntilde;&ograve;&egrave; &iuml;&eth;&icirc;&igrave;&ucirc;&oslash;&euml;&aring;&iacute;&iacute;&ucirc;&otilde; &agrave;&euml;&uuml;&iuml;&egrave;&iacute;&egrave;&ntilde;&ograve;&icirc;&acirc; &iacute;&aring; &icirc;&atilde;&eth;&agrave;&iacute;&egrave;&divide;&egrave;&acirc;&agrave;&thorn;&ograve;&ntilde;&yuml;: &acirc;&ntilde;&aring; &ccedil;&agrave;&acirc;&egrave;&ntilde;&egrave;&ograve; &icirc;&ograve; &Acirc;&agrave;&oslash;&aring;&eacute; &ocirc;&agrave;&iacute;&ograve;&agrave;&ccedil;&egrave;&egrave;. &Aring;&ntilde;&euml;&egrave; &Acirc;&ucirc; &otilde;&icirc;&ograve;&egrave;&ograve;&aring; &iuml;&eth;&egrave;&yuml;&ograve;&iacute;&icirc; &oacute;&auml;&egrave;&acirc;&egrave;&ograve;&uuml; &auml;&agrave;&igrave;&oacute; &iacute;&aring;&icirc;&aelig;&egrave;&auml;&agrave;&iacute;&iacute;&ucirc;&igrave; &iuml;&eth;&egrave;&iuml;&icirc;&auml;&iacute;&aring;&ntilde;&aring;&iacute;&egrave;&aring;&igrave; &aacute;&oacute;&ecirc;&aring;&ograve;&agrave; &ouml;&acirc;&aring;&ograve;&icirc;&acirc; &ntilde; &acirc;&ucirc;&ntilde;&icirc;&ograve;&ucirc; &egrave;&euml;&egrave; &iuml;&icirc;&eth;&agrave;&auml;&icirc;&acirc;&agrave;&ograve;&uuml; &eth;&aring;&aacute;&aring;&iacute;&ecirc;&agrave; &iuml;&icirc;&yuml;&acirc;&euml;&aring;&iacute;&egrave;&aring;&igrave; &Auml;&aring;&auml;&agrave; &Igrave;&icirc;&eth;&icirc;&ccedil;&agrave; &egrave;&ccedil; &icirc;&ecirc;&iacute;&agrave;, &ograve;&icirc; &igrave;&ucirc; &aacute;&oacute;&auml;&aring;&igrave; &eth;&agrave;&auml;&ucirc; &iuml;&icirc;&igrave;&icirc;&divide;&uuml; &Acirc;&agrave;&igrave;!</p>
      
<div align="center">
        <table width="90%"  class="mytable" cellspacing="0" cellpadding="0">
          <tr class="asd">
            <td width="60%">&Oacute;&ntilde;&euml;&oacute;&atilde;&agrave;</td>
            <td width="20%">&Aring;&auml;&egrave;&iacute;&egrave;&ouml;&agrave;<br />
          &egrave;&ccedil;&igrave;&aring;&eth;&aring;&iacute;&egrave;&yuml;</td>
            <td width="20%">&Ouml;&aring;&iacute;&agrave;/ &aring;&auml;. &egrave;&ccedil;&igrave;&aring;&eth;&aring;&iacute;&egrave;&yuml;<br>
          (&eth;&oacute;&aacute;.)</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
        </table></DIV><img src="../Templates/Doma_gory/fon_drugie_raboty.png" alt="" style=" filter:alpha(opacity = '0'); ">
        <div class="poi">&Ntilde;&ograve;&icirc;&egrave;&igrave;&icirc;&ntilde;&ograve;&uuml; &oacute;&ntilde;&euml;&oacute;&atilde; &igrave;&icirc;&aelig;&aring;&ograve; &igrave;&aring;&iacute;&yuml;&ograve;&uuml;&ntilde;&yuml; &acirc; &ccedil;&agrave;&acirc;&egrave;&ntilde;&egrave;&igrave;&icirc;&ntilde;&ograve;&egrave; &icirc;&ograve; 
        &ntilde;&eth;&icirc;&ecirc;&icirc;&acirc; &egrave; &icirc;&aacute;&uacute;&aring;&igrave;&icirc;&acirc; &eth;&agrave;&aacute;&icirc;&ograve;.<br />
      &Icirc;&ecirc;&icirc;&iacute;&divide;&agrave;&ograve;&aring;&euml;&uuml;&iacute;&agrave;&yuml; &ntilde;&oacute;&igrave;&igrave;&agrave; &ccedil;&agrave;&ecirc;&agrave;&ccedil;&agrave; &icirc;&iuml;&eth;&aring;&auml;&aring;&euml;&yuml;&aring;&ograve;&ntilde;&yuml; &iuml;&icirc;&ntilde;&euml;&aring; &icirc;&ntilde;&igrave;&icirc;&ograve;&eth;&agrave; &icirc;&aacute;&uacute;&aring;&ecirc;&ograve;&agrave;  </div>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
    </div></td>
  </tr>

PS Извиняюсь за текст: сама не пойму, что тут со шрифтом...

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »