HTML и CSS

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

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

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

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

  • Pingback: Прозрачность средствами css (для начинающих) - Уроки | Блог Ильи Житенёва()

  • доходчиво.. тебе нужно писать что-то более сложное 😉

    • Ответ для Дмитриев: времени маловато, чтобы писать о чём-то слишком серьёзном.

  • Никита

    Нихрена не понятно!!!

    • Ответ для Никита: бывает) Если напишите что конкретно вам непонятно (на каком шаге у вас возникли проблемы), то попробую вам помочь.

  • Никита

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

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

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

      • Никита

        Меня лично напрягает это «наследование прозрачности»

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

          • Никита

            Я буду делать так как считаю нужным

          • Ответ для Никита: делайте, ради Бога, это ваше право.

    • Саша

      отличный способ спасибо

  • Марина

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

    • Тогда php вам не может помочь.

  • Этот способ сработает, когда точно известны размеры полей. 😐

  • Олесь

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

    • Ответ для Олесь: Это ваш выбор где чему учиться или не учиться вообще ничему.

  • 💡 Проще всего в фон поместить полупрозрачный .png.

    • Ответ для олег: да, но в данной статье были рассмотрены методы именно через css. Я сам чаще использую png, чем такой метод.

  • Влад

    Спасибо, про rgba я то и забыл.

  • Спасибо! помогло! 😉