Css opacity внутри opacity

opacity

Прячем элемент на странице, делая его полностью или частично прозрачным.

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство opacity управляет прозрачностью элемента. С его помощью можно полностью спрятать текст или элемент. А можно сделать полупрозрачным — дизайнеры любят такой приём на современных сайтах.

Пример

Скопировать ссылку «Пример» Скопировано

Элемент станет прозрачным:

 .selector  opacity: 0;> .selector  opacity: 0; >    Скопировать Скопировано Не удалось скопировать   

Элемент полупрозрачный, сквозь него видно фон:

 .selector  opacity: 0.5;> .selector  opacity: 0.5; >    Скопировать Скопировано Не удалось скопировать   

Элемент совсем непрозрачный:

 .selector  opacity: 1;> .selector  opacity: 1; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Свойство opacity принимает дробные или целые значения от 0 до 1 включительно. 0 будет означать полную прозрачность, а 1 полную непрозрачность (значение по умолчанию).

Как понять

Скопировать ссылку «Как понять» Скопировано

Можно представить, что 0 равен 0% видимости элемента, а 1 в свою очередь 100% видимости элемента. Указывая любые промежуточные значения вы гибко управляете видимостью.

Стоит быть внимательным с этим свойством: невидимый элемент всё равно остаётся на странице и продолжает влиять на поток документа. Грубо говоря, если вы скроете какой-то блок при помощи opacity , то он просто будет невидим, но не перестанет занимать своё место, его соседи не займут его место, а родитель не схлопнется, если это был единственный ребёнок.

Представьте, что элемент просто надевает Мантию-невидимку как у Гарри Поттера.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Свойство прозрачности можно анимировать 🎉

💡 Элемент не пропадает со страницы, продолжает влиять на поток документа.

💡 Можно задавать любые дробные значения. Например, 0.33 или 0.1.

💡 Это не наследуемое свойство. НО! Если родителю задано это свойство, то и все дети вместе с ним будут становиться прозрачными.

💡 Вместо opacity : 0 можно использовать свойство visibility : visibility : hidden — будет тот же результат.

💡 В дробных значениях можно опустить первый ноль: opacity : . 5 . И всё равно будет работать 🧙‍♀️

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

🛠 Очень частый кейс — сделать полупрозрачную заливку поверх картинки. Это обычно называют оверлеем или вуалью. В этом случае не стоит применять свойство opacity , работайте с полупрозрачными цветами с альфа-каналом.

 selector  position: relative;> selector:before  content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgb(0 0 0 / 0.5); /* или в формате HEX background-color: #00000080; */> selector  position: relative; > selector:before  content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgb(0 0 0 / 0.5); /* или в формате HEX background-color: #00000080; */ >    Скопировать Скопировано Не удалось скопировать   

🛠 Когда-то была популярна шутка, что если ваш заказчик не заплатил вам, то его можно шантажировать следующим способом: цепляете на сайт скрипт, который будет каждый день уменьшать opacity для body на 0.1 пока сайт полностью не пропадёт или пока заказчик не заплатит 😬

Если что, это не я вам рассказала 🤫

Источник

opacity

The opacity CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.

Try it

Syntax

opacity: 0.9; opacity: 90%; /* Global values */ opacity: inherit; opacity: initial; opacity: revert; opacity: revert-layer; opacity: unset; 

Values

Value	Meaning
0	The element is fully transparent (that is, invisible).
Any strictly between 0 and 1	The element is translucent (that is, content behind the element can be seen).
1 (default value)	The element is fully opaque (visually solid).

Description

opacity applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, the element and its children all have the same opacity relative to the element’s background, even if they have different opacities relative to one another.

Using opacity with a value other than 1 places the element in a new stacking context.

To change the opacity of a background only, use the background property with a color value that allows for an alpha channel. For example:

Accessibility concerns

If text opacity is adjusted, it is important to ensure that the contrast ratio between the color of the text and the background the text is placed over is high enough that people experiencing low vision conditions will be able to read the content of the page.

Color contrast ratio is determined by comparing the luminosity of the opacity-adjusted text and background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.

Formal definition

Initial value	1
Applies to	all elements
Inherited	no
Percentages	map to the range [0,1]
Computed value	The same as the specified value after clipping the to the range [0.0, 1.0].
Animation type	by computed value type

Formal syntax

Examples

Setting opacity

The following example demonstrates how the opacity property changes the opacity of the entire element and content, thus making the text very hard to read.

HTML

div class="light">You can barely see this.div> div class="medium">This is easier to see.div> div class="heavy">This is very easy to see.div> 

CSS

div  background-color: yellow; font-weight: bold; font-size: 130%; > .light  opacity: 0.2; /* Barely see the text over the background */ > .medium  opacity: 0.5; /* See the text more clearly over the background */ > .heavy  opacity: 0.9; /* See the text very clearly over the background */ > 

Result

Setting opacity on hover

In the following example opacity is changed on hover, so the striped background image on the parent element shows through the image.

HTML

div class="wrapper"> img src="//interactive-examples.mdn.mozilla.net/media/dino.svg" alt="MDN Dino" width="128" height="146" class="opacity" /> div> 

CSS

img.opacity  opacity: 1; > img.opacity:hover  opacity: 0.5; > .wrapper  width: 200px; height: 160px; background-color: #f03cc3; background-image: linear-gradient( 90deg, transparent 50%, rgba(255, 255, 255, 0.5) 50% ); background-size: 20px 20px; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

Found a content problem with this page?

This page was last modified on Jul 18, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

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

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

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

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

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

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

#box2 < width: 200px; height: 90px; margin:40px; padding:20px; >#text2 .opacity < background:url(bg.png); background:rgba(ff, ff, ff, 0.5); >