Свойство opacity задает полупрозрачность элементу. Если у элемента задана полупрозрачность - это значит, что через него будут просвечивать те элементы, которые лежат под ним.

Синтаксис

селектор {
	opacity: число от 0 до 1;
}

Значения

Значение 0 - это полная прозрачность, 1 - полная непрозрачность. Промежуточное значение, например 0.3, задает полупрозрачность. По правилам CSS дроби можно писать и без нуля спереди: 0.3 = .3.

Значение по умолчанию: 1.

Примеры

Пример

В данном примере блоку добавлена полупрозрачность и через него просвечивает фон (через границу, через буквы и фон):

#elem {
	opacity: 0.5;
	color: black;
	border: 20px solid black;
	background-color: red;
	width: 300px;
	padding: 10px;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt.

Пример

Бывают ситуации, когда хочется, чтобы граница была полупрозрачной, а текст - нет. Это делается с помощью rgba() (чтобы фон не залазил под границу воспользуемся свойством background-clip):

#elem {
	border: 20px solid rgba(0, 0, 0, 0.5);
	color: black;
	width: 300px;
	background-color: red;
	background-clip: padding-box;
	padding: 10px;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt.

Пример

Без background-clip фон залезет под границу и мы увидим эффект наложения красного фона и полупрозрачной черной границы:

#elem {
	border: 20px solid rgba(0, 0, 0, 0.5);
	color: black;
	width: 300px;
	background-color: red;
	padding: 10px;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt.