X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Opacity в div
nickgu
nickgu
Topic Starter сообщение 14.4.2011, 22:23; Ответить: nickgu
Сообщение #1


У меня проблема - вложенные div'ы наследуют стиль opacity:0.7
Т.е. если
<div style="background-color:#444;opacity:0.7">
<div style="background-color:#111;">text</div>
</div>
то бэкграунд вложенного тоже будет 0.7, даже если ему задать в стилях opacity:1;

Как это побороть?
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
LoaD_hb
LoaD_hb
сообщение 15.4.2011, 10:40; Ответить: LoaD_hb
Сообщение #2


Я делал так, пропиши это для главного блока, тогда вложенные блоки не будут наследовать это свойство.:
[CSS]background:rgba(0, 0, 0, 0.5);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#AA000000,endCol
orstr=#AA000000);
zoom:1;[/CSS]
где 0,5 соответственно прозрачность.
а вот это:
[CSS]filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#AA000000,e
ndColorstr=#AA000000);[/CSS]
нужно чтобы работало в IE
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
pavelsc
pavelsc
сообщение 15.4.2011, 12:16; Ответить: pavelsc
Сообщение #3


(LoaD_hb @ 15.4.2011, 13:40) *
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#AA000000,endCol
orstr=#AA000000);

Месье знает толк в извращениях ))) Да и вопрос не в этом.
По моему так проще:
[CSS]filter:progid:DXImageTransform.Microsoft.alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;[/CSS]


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

Вот например так:
<div id="container2">

<div class="transparency">

</div>

<div class="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>

</div>

[CSS]
#container2
{
padding:20px;
width:300px;
color:#FFFFFF;
position:relative;
float:left;
margin-left:20px;
overflow:hidden;
}

#container2 .transparency
{
opacity:0.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;
background-color:#000000;
width:340px;
height:1500px;
position:absolute;
top:0px;
left:0px;
z-index:-1;
}

.content
{
position:relative;
} [/CSS]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
LoaD_hb
LoaD_hb
сообщение 15.4.2011, 13:28; Ответить: LoaD_hb
Сообщение #4


(pavelsc @ 15.4.2011, 15:16) *
Месье знает толк в извращениях )))

Но зато уж точно сработает!=)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
nickgu
nickgu
Topic Starter сообщение 15.4.2011, 17:51; Ответить: nickgu
Сообщение #5


Не могу сделать не вложенными, т.к. ширина и длина первого div'a зависит от вложенных
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
nickgu
nickgu
Topic Starter сообщение 15.4.2011, 17:54; Ответить: nickgu
Сообщение #6


Load, спасибо работает
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
LoaD_hb
LoaD_hb
сообщение 15.4.2011, 19:20; Ответить: LoaD_hb
Сообщение #7


nickgu,не за что.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
pavelsc
pavelsc
сообщение 15.4.2011, 23:14; Ответить: pavelsc
Сообщение #8


(nickgu @ 15.4.2011, 20:51) *
Не могу сделать не вложенными, т.к. ширина и длина первого div'a зависит от вложенных


nickgu, ну если бы вы прочитали дальше фразы "не вложенными" мой пост, то поняли бы что в нем длина "первого div'a" зависит от содержимого .content. Для ширины делается аналогично длине. А то что вам предложено - это CSS3. И работает таким образом что если браузер не CSS3 и не IE, то фон у вас не то что не будет прозрачным - его вообще не будет.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
nickgu
nickgu
Topic Starter сообщение 15.4.2011, 23:46; Ответить: nickgu
Сообщение #9


Да, спасибо. Не разобрался сразу - показалось, что задан жесткий размер 340 на 1500
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
nickgu
nickgu
Topic Starter сообщение 16.4.2011, 0:22; Ответить: nickgu
Сообщение #10


блин, у меня это для поп-апа. И с этим кодом - поп-ап на своем месте, а див с прозрачностью просто внизу страницы:wacko:
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Моя div-ная верстка соответствует ли стандартам
Хотелось бы конструктивной критики
10 muratastana 1545 14.1.2023, 1:16
автор: xweb
Открытая тема (нет новых ответов) DIV'ы в строку
0 RedEclipse 5463 29.9.2016, 17:53
автор: -RedEclipse-
Открытая тема (нет новых ответов) при выборе radio в option не скрывались div
0 serj123 6928 17.4.2016, 17:45
автор: -serj123-
Открытая тема (нет новых ответов) Как заставить отображать несколько элементов DIV в одну строку?
2 Aalena 3999 10.1.2016, 10:18
автор: -Aalena-
Открытая тема (нет новых ответов) Фоны в в div'ах расходятся при сужении экрана
1 Balalaaika1 5614 2.6.2015, 19:35
автор: -Degradator-


 



RSS Текстовая версия Сейчас: 28.3.2024, 15:09
Дизайн