Opacity решение проблемы с наследованием дочерними элементами

Проблема возникает, как правило, при создании каких либо вложенных меню или просто элементов внутри, так как это свойство наследуется всеми потоками, если вы добавите это свойство к независимому блоку, то тут без вопросов, а если у вас следующая ситуация:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</script>
	<style type="text/css">
	.cover {
		background: #3a332e;
		opacity: 0.6;
		width: 300px;
		height: 100px;
	}
	.block1 {
		color: #f00;
	}
	.block2 {
		color: #000;
	}
	</style>
</head>
<body>
<div class="cover">
	<div class="block1"><h1>Sample1</h1></div>
	<div class="block2"><h1>Sample2</h1></div>
</div>
 
</body>
</html>

Пример 1 Opacity

Как видите мы имеем 2 блока внутри одного с заданным свойством opacity: 0.6; проблема заключается в том, что оба блока внутри унаследовали это свойство и текст стал не четким. Как же исправить эту ситуацию, на первый взгляд приходит простое и понятное решение присвоить обоим блокам opacity: 1; и забыть о проблеме, но это увы не сработает. Я предлагаю рассмотреть 2 варианта решения этой проблемы, оба они правильные и имеют право на жизнь, но второй вариант все же практичнее. Для решения этой задачи можно использовать абсолютное позиционирование вот как это выглядит:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</script>
	<style type="text/css">
	.cover {
		background: #3a332e;
		opacity: 0.6;
		width: 300px;
		height: 100px;
	}
	.block1 {
		color: #f00;
	}
	.block2 {
		color: #000;
		position: absolute;
		left: 8px;
		width: 270px;
		top: 55px;
	}
	</style>
</head>
<body>
<div class="cover">
	<div class="block1"><h1>Sample1</h1></div>
</div>
<div class="block2"><h1>Sample2</h1></div>
 
</body>
</html>

Пример 2 Opacity

Как вы могли заметить, мы вынесли блок за пределы и задали ему отступы, таким образом, не унаследовав им свойство прозрачности. Такой вариант вполне нормально работает, но далеко не всегда является удобным, поэтому есть вариант перевода цвета фона в RGBA вот как это будет выглядеть:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</script>
	<style type="text/css">
	.cover {
		background: rgba(58, 51, 46, 0.6);
		width: 300px;
		height: 100px;
	}
	.block1 {
		color: #f00;
	}
	.block2 {
		color: #000;
	}
	</style>
</head>
<body>
<div class="cover">
	<div class="block1"><h1>Sample1</h1></div>
	<div class="block2"><h1>Sample2</h1></div>
</div>
 
</body>
</html>

Пример 3 Opacity

Согласитесь намного проще, ни чего не нужно мудрить с блоками и отступами, вам нужно лишь прописать цвет в формате RGB и задать тут же прозрачность. Для тех, у кого возник вопрос, а где взять эти цифры все просто я использую Photoshop:

RGB Photoshop

Так же в интернете куча сервисов по подбору цвета, так что найдете без проблем, единственный момент могут возникнуть проблемы с отображением в Internet Explorier ниже 10 версии для этого вам нужно добавить следующий код:

 <!--[if lt IE 9]>
   <style type="text/css">
   .cover {
   background: rgba(58, 51, 46,, 0.6);
   filter: alpha(Opacity=60); /* Прозрачность в IE */
   }
   </style>
<![endif]-->

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

Дата публикации:2018-09-03

Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!

Сделать сайт и opacity, наследование opacity

Автор: Алексей Мезенцев