Наследование прозрачности, как побороть?

Lann · [+4 05.04.07]

Приветствую!
Необходимо сделать полу-прозрачный фон над картинкой, над этим фоном предпологается размещение текста. Прозрачность делаю

filter:Alpha(Opacity=20);
-moz-opacity: 0.20;

Получается что текст наследует прозрачность фона - что не желательно. Как побороть?

Пробовал вместо div исполльзовать td (так же сочетания того и другово), пробовал указывать для текста 100% непрозрачность, заключать его в контейнер, неработает ни в ie ни в Ffox`e. Помогите кто знает

ниже образец кода

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>Test</title><style>

#bg {
width:500px;
height:500px;
background: #000000;
filter:Alpha(Opacity=20);
-moz-opacity: 0.20;

}

#container {
width:400px;
height:400px;
margin-right:auto;
margin-left:auto;
border: 1px solid #7e9fb1;
}

.texttemp {
font-size:30px;
font-family:Verdana;
font-weight:Bold;
color:#ffffff;
}

</style></head><body bgcolor="#263740">


<div id="bg">
<div id="container"><span class="texttemp">Текст наследует прозрачность. Как бы отучить?</span></div>
</div>


</body></html>

KidsKilla · 27.07.2006, 14:00

1) кроме

Код:

filter:Alpha(Opacity=20);
-moz-opacity: 0.20;

для оперы так:

Код:

opacity:0.20

2) вложенные элементы всегда наследуют родительские св-ва. т.е. хоть ты раком стань, а вложеный текст будет полупрозрачным.

3) решение: блок с текстом вне блока с чемтотам ещё:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
body{background:#003438 url(http://www.flasher.ru/forum/images/russian/flasher_logo.gif);}
.bg{background:#fff;width:300px;height:300px;filter:Alpha(Opacity=20);-moz-opacity: 0.20;opacity:0.20}
.txt{margin-top:-300px;width:300px;height:300px;}
</style>

</head>
<body>
<script type="text/javascript"><!--

//--></script>
<div class="bg"></div>
<div class="txt">Приветствую!
Необходимо сделать полу-прозрачный фон над картинкой, над этим фоном предпологается размещение текста. Прозрачность делаю
</div>

</body>
</html>

4) вариант решения есть ещё 1н. похожий. с position:relative и position:absolute

5) пользуемся тегом code!

Lann · [+4 05.04.07]

Спасибо,

п.2 - жаль, в спеке написано - не наследуемое

по п. 3 -4, примерно так и представлял.

п.5 прошу прощ. незнал

Sorin · 27.07.2006, 18:57

Есть интересное решение которое применил для создания одного сайта. Там я использую маленькую полупрозрачую png картинку в качестве фона. Эта фишка рулит в разные браузеры и можно манипулировать как угодно. Вот копайся - www.buev.net
Смотри CSS - там вся кухня. Там найдешь и другое интересное - например создание теней.

KidsKilla · 27.07.2006, 19:49

Цитата:

Сообщение от Sorin

Есть интересное решение которое применил для создания одного сайта. Там я использую маленькую полупрозрачую png картинку в качестве фона. Эта фишка рулит в разные браузеры и можно манипулировать как угодно. Вот копайся - www.buev.net
Смотри CSS - там вся кухня. Там найдешь и другое интересное - например создание теней.

пнг в ие 5.0 не работает в 5.5 это геморрой, который поискать. в 6й кажется тоже непросто.

Lann · [+4 05.04.07]

Цитата:

Сообщение от Sorin

.. использую маленькую полупрозрачую png картинку в качестве фона.

О, респект, спасибо. То что надо. Про тени и прозрачность вкурсе, не догадался картинку в фон разместить. Сайт поразбираю.

Lann · [+4 05.04.07]

Тут - http://www.tigir.com/alpha_png.htm, хорошая статья с решением по проблеме прозрачной подложке.

2KidsKilla - особого гемороя я не увидел, для решения моей задачи это само то. Лучше, во всяком случае, чем margin`ами блоки наслаивать.

2Sorin - твой сайт не удалось разобрать - у меня почему то не сохраняется ни один из png файлов.

KidsKilla · 28.07.2006, 17:15

Цитата:

Сообщение от Lann

Тут - http://www.tigir.com/alpha_png.htm, хорошая статья с решением по проблеме прозрачной подложке.

2KidsKilla - особого гемороя я не увидел, для решения моей задачи это само то. Лучше, во всяком случае, чем margin`ами блоки наслаивать.

2Sorin - твой сайт не удалось разобрать - у меня почему то не сохраняется ни один из png файлов.

подход у каждого свой. я всё же предпочитаю работу и в 5.0 осле.
пнг прост на дух не переношу. дело даже не в ие, прост тупой он и тяжёлый. пнг-24 т.е.

Sorin · 29.07.2006, 01:44

Цитата:

Сообщение от KidsKilla

пнг в ие 5.0 не работает в 5.5 это геморрой, который поискать. в 6й кажется тоже непросто.

Геморрой для тех кто не знает в чем дело. Есть определенная фишка в CSS которая решает это дело на всегда. Также отвергнуть такой формат как png просто глупо. Дело в том, что это пожалуй единственный графический формат в вебдизайне в который можно использовать полупрозрачные эффекты PNG 24 (как во флеше). Также это имеет достоинства от GIF и от JPG. То есть он находится между этими форматами и компенсирует их недостатки. Например в PNG получится качественнее скриншот который нужно опубликовать на веб странице.
В JPG скриншот не может иметь четкие грани и линии (зато занимет меньше кб) а GIF имеет хорошую четкость, но палитра 256 и большой объем в кб не очень хорошо решает ситуацию. PNG имеет четкость, некая векторность (как у GIF) и средний объем в кб, а у скриншотов с простой графикой (малоцветностью), то даже объем меньше чем GIF который может переплюнуть JPG по обьему.

Sorin · 29.07.2006, 01:54

Цитата:

Сообщение от Lann

2Sorin - твой сайт не удалось разобрать - у меня почему то не сохраняется ни один из png файлов.

Если хоть что то понимаешь в нтмл и css, то и разбирать нечего. Картинки бери из папку дата - http://buev.net/data/ (доступ свободный). В CSS имеется и запасной код (для старых броузеров типа нетскейпа и opers). Я тестировал сайт в оперу 6.0 и NN 6.1. Также нет проблем с IE 5.5. Про современные броузеры и речи быть не может. Рулит 100%.

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид