Css make div transparent

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.

Источник

How to make a box semi-transparent

This guide will help you to understand the ways to make a box semi-transparent using CSS.

Change the opacity of the box and content

If you would like the box and all of the contents of the box to change opacity, then the CSS opacity property is the tool to reach for. Opacity is the opposite of transparency; therefore opacity: 1 is fully opaque—you will not see through the box at all.

Using a value of 0 would make the box completely transparent, and values between the two will change the opacity, with higher values giving less transparency.

Changing the opacity of the background color only

In many cases you will only want to make the background color itself partly transparent, keeping the text and other elements fully opaque. To achieve this, use a color value which has an alpha channel—such as rgba. As with opacity , a value of 1 for the alpha channel value makes the color fully opaque. Therefore background-color: rgba(0,0,0,.5); will set the background color to 50% opacity.

Try changing the opacity and alpha channel values in the below examples to see more or less of the background image behind the box.

Note: Take care that your text retains enough contrast with the background in cases where you are overlaying an image; otherwise you may make the content hard to read.

See also

Found a content problem with this page?

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

Источник

CSS прозрачность – просто о важном

О том, что такое CSS, знают практически все, кто тем или иным образом причастен к созданию сайтов. Термин « CSS прозрачность » (или css opacity ) тоже на слуху. Чаще всего эта методика используется для решения дизайнерских задач (посредством верстки), улучшения юзабилити ресурса.

Что можно сделать при помощи данной технологии?

Используя прозрачность CSS, можно варьировать степень прозрачности как страницы в целом, так и отдельных ее частей:

Как задается прозрачность CSS: формальности

За техническую сторону создания этого эффекта отвечает CSS свойство opacity (примечательно, что в переводе на русский язык это слово и означает « прозрачность »).

Данное свойство характеризуется следующими признаками:

• значение задается в цифровом выражении (от 0 до 10; чем больше число – тем меньшей будет прозрачность объекта);
• применяется ко всем элементам, имеющимся на странице (то есть можно задать при помощи CSS прозрачность блока или текста);
• не наследуется.

Планируя использовать этот эффект, надо знать, как он поддерживается в разных браузерах:

Техническая сторона вопроса: задаем прозрачность фона

Одним из самых важных в верстке (и поэтому распространенных) является вопрос о том, как задать прозрачность фона в CSS. Ничего сложного здесь нет.

Код элемента, с которым ведется работа, должен выглядеть следующим образом (в скобках указаны варианты, которые срабатывают в разных браузерах):

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/ -moz-opacity: 0.5; /- Mozi11a 1.6 m amme */ -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */ opacity: 0.5; /* C553 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */

При этом надо помнить, что заданная элементу прозрачность впоследствии наследуется дочерними элементами. То есть, если внутри фона есть картинка, текст или что-то еще – оно автоматически изменит степень прозрачности. Это не всегда допустимо.

Поэтому следует знать о таком варианте работы с прозрачностью (возьмем в качестве примера ситуацию, когда блок меню на прозрачном фоне должен быть непрозрачным).

Видоизменяем код на такой:

Задача решена. Такой метод можно использовать в тех случаях, когда нужно сделать непрозрачными те элементы, которые находятся внутри кода.

Техническая сторона вопроса: задаем прозрачность блока

Если прозрачность фона уже задана, то прозрачность блока, расположенного внутри него, в CSS задается автоматически. Об этом говорилось выше.

Если же нужно, чтобы дочерний блок не наследовал прозрачность родительского – все обстоит сложнее! Решить данный вопрос можно следующим образом:

Сущность данного метода состоит в том, что блок, который надо сделать непрозрачным, не является на самом деле дочерним. Поэтому его прозрачность будет независимой величиной.

Дополнение

Еще один важный вопрос прозрачность background в CSS. Иными словами, это создание полупрозрачного цветного фона. Его можно задать следующим образом:

background: rgba( 255, 0, 0, 0.5); /* чистый красный с прозрачностью 50% */

Таким образом, в работе с прозрачностью в CSS все достаточно просто и логично.

Надеемся, что данная статья оказалась для Вас действительно полезной.

Источник