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

Расположение непрозрачного элемента внутри прозрачного (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]-->

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

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

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

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

  1. Ничего не понятно!!! и есть способ гораздо проще чем ваш! Нужно просто создать полупрозрачное изображение в фотошопе и поставить как фон. Так не проще?

    1. Вы просто не хотите понять. Можно вообще весь сайт сделать в фотошопе и выложить в виде картинки.. так не проще? Что париться с версткой то?

      Да и ни кто вас не заставляет делать именно так, как предлагаю я. Хотите — делайте в фотошопе. Я лишь описал ещё одну возможность. Да и не всё можно сделать прозрачным в фотошопе.

  2. Вариант, конечно хороший.
    Но что, если в непрозрачный блок выводится информация, и высоту предугадать мы не можем?
    Прозрачный же блок не будет растягиваться вниз по объему текста …

  3. Тупой метода, и вобще ваши советы тупые, лучше скачивать книги и учить все самим, чем вот такое, по книге лучше учить, а не читать уроки какого-то задрота, надеюсь что мой следуйщий совет вам подойдет: » Лучше рисуйте зайчиков » чем такой хруню заниматся!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *