Непонятная проблема с прозрачностью

Hmury · January 10, 2011

Подскажите, совсем запутался.

Есть следующий код (упрощенно):

style.css

body {
	background-image: url(../images/fon-clear.jpg);
	background-repeat: no-repeat;
	background-color: black;
	background-position: 0 160px;
	color: white;
	min-width: 1000px;
	height: 100%;
}
.main {
	min-height: 650px;
	width: 77%;
	bottom: 0;
	background-color: black;
	opacity: 0.7; -moz-opacity:0.7; filter:alpha(opacity=70);
}

index.php

<body>
	<div class="main">
		<div class="content">
		........................
		........................
		........................
		</div>
	</div>
</body>

Т.е. суть - есть body, фоном для него использована картинка, внутри него - div class="main", для которого фоном установлен просто черный цвет, и для этого цвета сделана небольшая прозрачность (цель - эффект "затемнения" фоновой картинки body). Дальше уже внутри div class="content" расположен основной контент сайта.

И все бы замечательно, но при этом картинки, расположенные внутри div class="content", также приобретают эффект прозрачности, чего не хотелось бы.

Естественно, первое, что приходит на ум:

.main img {
	opacity: 1; -moz-opacity:1; filter:alpha(opacity=100);
}

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

Т.е. если, например, поставить:

.main img {
	opacity: 0.1; -moz-opacity:0.1; filter:alpha(opacity=10);
}

,

то видно, что картинки действительно становятся более прозрачными, т.е. код работает.

Но вот при opacity:100 - они имеют величину прозрачности родителя.

Как сделать их совсем непрозрачными?

(opacity:200 пробовал, не помогает)

Edited January 10, 2011 by Hmury

arez · January 10, 2011

opacity наследуется всеми вложенными элементами, в вашем случаи нужно использовать RGBA

Hmury · January 10, 2011

opacity наследуется всеми вложенными элементами, в вашем случаи нужно использовать RGBA

Имеется в виду - картинку заранее сделать прозрачной в графическом редакторе?

arez · January 10, 2011

Нет, в css3 есть rgba

Hmury · January 13, 2011

Нет, в css3 есть rgba

Только все тот же IE подводит снова....

psywalker · January 13, 2011

opacity наследуется всеми вложенными элементами

Неправда, он НЕ наследуется, а накладывает маску на всех потомков.

Только все тот же IE подводит снова....

Не подводит, там есть фильтры для градиента.

Sign In

Непонятная проблема с прозрачностью

Question

Hmury

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

arez

Link to comment

Share on other sites

Hmury

Link to comment

Share on other sites

arez

Link to comment

Share on other sites

Hmury

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information