Форум Flasher.ru

Форум Flasher.ru (http://www.flasher.ru/forum/index.php)
-   HTML/DHTML/CSS/JS/VB (http://www.flasher.ru/forum/forumdisplay.php?f=66)
-   -   Наследование прозрачности, как побороть? (http://www.flasher.ru/forum/showthread.php?t=83076)

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

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

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

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

ниже образец кода
Код:
<!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 27.07.2006 14:36
Спасибо,

п.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 28.07.2006 11:03
Цитата:
Сообщение от Sorin
.. использую маленькую полупрозрачую png картинку в качестве фона.
О, респект, спасибо. То что надо. Про тени и прозрачность вкурсе, не догадался картинку в фон разместить. Сайт поразбираю.

Lann 28.07.2006 16:36
Тут - 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%.

KidsKilla 30.07.2006 01:42
Цитата:
Сообщение от Sorin
Геморрой для тех кто не знает в чем дело. Есть определенная фишка в CSS которая решает это дело на всегда. Также отвергнуть такой формат как png просто глупо.
в чём дело я знаю. и знаю штук 5 решений даной траблы. но ие 5.5 это 5% а 5.0 (где пнг не отображается в принципе) это 15-20%. делаем выводы.
но это собсно холивар, причём не самый удачный. у всех свои подходы и приёмы. спорить безтолку.


Часовой пояс GMT +4, время: 05:04.

Copyright © 1999-2008 Flasher.ru. All rights reserved.
Работает на vBulletin®. Copyright ©2000 - 2026, Jelsoft Enterprises Ltd. Перевод: zCarot
Администрация сайта не несёт ответственности за любую предоставленную посетителями информацию. Подробнее см. Правила.