Форум программистов «Весельчак У»
  *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

  • Рекомендуем проверить настройки временной зоны в вашем профиле (страница "Внешний вид форума", пункт "Часовой пояс:").
  • У нас больше нет рассылок. Если вам приходят письма от наших бывших рассылок mail.ru и subscribe.ru, то знайте, что это не мы рассылаем.
   Начало  
Наши сайты
Помощь Поиск Календарь Почта Войти Регистрация  
 
Страниц: [1]   Вниз
  Печать  
Автор Тема: наследование прозрачности  (Прочитано 10638 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Aveic
Постоялец

ru
Offline Offline
Пол: Мужской
Yellow


« : 16-02-2008 12:51 » 

К примеру есть код:
Код:
...
<body>
<div id='wnd'>
<p class='h'>Header</p>
<p>text</p>
</div>
</body>
...
где css содержит:
Код:
body {
 background:black;
}
#wnd {
 background:white;
 opacity:0.5;
 filter:Alpha(Opacity='50');
}

p.h {
  color:red;
  background:orange;
  opacity:1;
  filter:Alpha(Opacity='100');
}
Все равно прозрачность наследуется, и p.h тоже бледно смотрится? Жаль Как сделать так чтобы элемент просто накладывался поверх фона без расчета прозрачности. Можно просто создать отдельный элемент, и абсолютно его позиционировать там где надо, но это не выход. Есть предложения?  Не понял
Записан
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #1 : 16-02-2008 18:14 » 

Aveic, опиши конечную цель.
Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Aveic
Постоялец

ru
Offline Offline
Пол: Мужской
Yellow


« Ответ #2 : 17-02-2008 06:17 » 

в общем, для примера: www.w-t-c.ru. Все панелм накладываются с прозрачностью на фон. И соответсвенно все элементы на них тоже. Однако, эти элементы смотрятся очень бледно, т.е. уже например чистого белого цвета не получишь. Как сделать так, чтобы они не использовали эту прозрачность, при этом оставаясь дочерними элементами панели?
Записан
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #3 : 17-02-2008 10:13 » 

Aveic, надо идти по другому пути: блоки с прозрачностью и обычные блоки должны быть в разных ветках дерева документа.

Кстати, приведенный сайт ужасен именно из-за прозрачности. Напрягать глаза и читать такой текст не каждый будет.

Кроме opacity есть другой механизм прозрачности - цвет transparent. На фон из нижележащих элементов сперва накладывается background и поверх его наносится color и border. Если background-color прозрачный, то его "как бы нет". Использование transparent для color и border бесполезно, т.к. в этом случае ни текста, ни границ мы не увидим - они будут попиксельно повторять фон.

Вариант решения.
Последовательно делаем несколько слоев: картинка, "светофильтр", блок с текстом.

Другое решение.
Картинку разрезать на части и нужные куски затемнить. Слои не нужны - страница делится на прямоугольные блоки и картинка используется для фона.

Последний вариант предпочтительнее, но могут быть сложности со сведением картинки.



О прозрачности (много интересных и полезных подробностей): http://www.tigir.com/opacity.htm
« Последнее редактирование: 17-02-2008 10:20 от RXL » Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Aveic
Постоялец

ru
Offline Offline
Пол: Мужской
Yellow


« Ответ #4 : 17-02-2008 10:34 » 

Кстати, приведенный сайт ужасен именно из-за прозрачности. Напрягать глаза и читать такой текст не каждый будет.
Согласен! хорошо, что он не мой Улыбаюсь
transparent не может установить степень прозрачности. Тут именно нужно alpha-смешивание.
Aveic, надо идти по другому пути: блоки с прозрачностью и обычные блоки должны быть в разных ветках дерева документа.
Жаль жизнь говно Улыбаюсь
Придется наверное отказаться от прозрачности Улыбаюсь
 
Записан
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #5 : 17-02-2008 11:26 » 

Aveic, надо читать спецификации. К сожалению, не могу сказать где описаны фичи IE.
Вот о прозрачности: http://www.w3.org/TR/2003/CR-css3-color-20030514/#transparency

Цитата
If the object is a container element, then the effect is as if the contents of the container element were blended against the current background using a mask where the value of each pixel of the mask is <alphavalue>.
Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #6 : 17-02-2008 12:00 » 

Aveic, посмотри это: https://forum.shelek.ru/index.php/topic,6451.msg120092#msg120092
Только прочти этот и следующий пост - во втором я указывал на исправление ошибки.
Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Aveic
Постоялец

ru
Offline Offline
Пол: Мужской
Yellow


« Ответ #7 : 18-02-2008 13:00 » 

Aveic, посмотри это: https://forum.shelek.ru/index.php/topic,6451.msg120092#msg120092
Только прочти этот и следующий пост - во втором я указывал на исправление ошибки.
Спс, тоже о таком подумывал Улыбаюсь
Ну вот еще один тупой вариант пришел в голову. Чтобы избежать наследования прозрачности, сделать два элемента: первый дочерний, у которого visibility:hidden. На основе него рассчитывается высота родительского элемента, у которого и выставлена opacity. Далее создается элемент, который по сути является копией предыдущего, но который не является дочерним по отношению к элементу прозрачного фона. Он абсолютно позиционируется вверх фона. Тем самым, он не будет наследовать прозрачность. По идеи у нас в одном месте будет два одинаковых контента, однако один из них не будет отображаться.
Ну вот пример:
Код:
<html>
<head><title>opacity</title>
<style>
body {
background:black;
color:white;
}

#bg {
background:white;
color:black;
opacity:0.5;
filter:Alpaha(Opacity='50');
width:300px;
margin:50px;
}

#content,#copy {
color:red;
font-weight:bold;
font-size:16pt;

}

#content {
visibility:hidden;
}

#copy {
position:absolute;
top:50px;
left:60px;
}

</style>
</head>
<body>
<div id='bg'>
<div id='content'>Content<br/>Content<br/>Content<br/></div>
</div>
<div id='copy'>Content<br/>Content<br/>Content<br/></div>
</body>
</html>
Метод туп тем, что контент дублируется, а соответсвенно растет и размер страницы Улыбаюсь Здесь более оправданно примение JS для выяснения высоты фонового прозрачного элемента. Однако, этот метод сработает и при отключенном JS Улыбаюсь в общем, хз Улыбаюсь
Записан
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #8 : 18-02-2008 14:20 » 

Aveic, долго пытался понять, чего ты хотел.  Здесь была моя ладья... Пока не скопировал сие в файл и не просмотрел.
Наверное лучше JS применить.

Кстати, постом выше - ссылка. Почитай - я не зря ее привел.
Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Страниц: [1]   Вверх
  Печать  
 

Powered by SMF 1.1.21 | SMF © 2015, Simple Machines