Расположение непрозрачного элемента внутри прозрачного (css)

Здравствуйте. Где-то месяц назад я опубликовал статью о том, как реализовать прозрачность cредствами css, где я пообещал в следующем посте рассказать как решить проблему прозрачности, когда все дочерние элементы унаследуют прозрачность от родителя и ничего нельзя с этим сделать. Для решения данной проблемы есть два способа.

Первый способ

К сожалению, с этим действительно ничего нельзя сделать, поэтому мы пойдём путём обмана – будем обманывать браузер. А именно, создадим 2 слоя, один рядом с другим. Один из них сделаем прозрачным, а другой заставим отображаться поверх первого, таким образом, они лишь визуально буду выглядеть как вложенные, но на самом деле они не будут являться дочерне-родительскими элементами, а следовательно, прозрачность первого не будет наследоваться ко второму элементу.

HTML код

<div id="text">А я нет!</div>
<div id="box">Я прозрачный!</div>

CSS стили

body {
	margin: 0;
	padding: 0;
	background: #66CCFF;
	font-size: 20px;
}

#box {
	margin: 20px;
	background: #FFFFFF;
	padding: 20px;
	width: 300px;
	height: 70px;
	z-index: 0;
	filter:alpha(opacity=50); 
	-moz-opacity:0.5;  
	opacity: 0.5; 
}
#text {
	background: #FFFFFF;
	width: 150px;
	height: 30px;
	padding: 10px;
	z-index: 10;
	position: absolute;
	left: 70px;
	top: 70px;
}

Второй способ

Этот способ имеет один минус – не все браузеры ещё хорошо поддерживают css3, но зато он позволяет делать фон (и только фон) родительского элемента полупрозрачным, не затрагивая при этом дочерние элементы. Кроме того, для реализации данного способа, вам необходимо будет создать однопиксельную картинку с тем-же цветом и тем же уровнем полу прозрачности.

HTML код

<div id="box2" class="opacity">
	Я прозрачный!
	<div id="text2">А я нет!</div>
</div>

CSS стили

#box2 {
	width: 200px;
	height: 90px;
	margin:40px;
    padding:20px;
}
#text2 {width: 100px; height: 30px; background: #fff;}
.opacity {
   background:url(bg.png);
   background:rgba(ff, ff, ff, 0.5);
  }
 <!--[if lte IE 7]>
   .opacity {
    zoom:1;
    background:#fff;
    filter:alpha(opacity=50);
   }
   .opacity * {
    position:relative;
   }
 <![endif]-->

Как видите, способы отличаются как реализацией, так и получаемым результатом. Выбирать особо не из чего, но если найдёте ещё какой-либо способ, то прошу поделиться им в комментариях к данной записи.

Пример работы обоих способов вы можете посмотреть здесь – верхние элементы – это первый способ, а нижние, соответственно, второй .

Надеюсь, что данный пост вам помог. Если есть вопросы – пишите в комментариях – отвечу.
__________________________
Хорошему сайту, для быстрой и нормальной работы необходим хороший хостинг, ну и конечно же без толкового хозяина ему тоже не обойтись 😉