Что такое opacity в css

Свойство opacity

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

Свойство принимает своим значением дробное число от 0 до 1 . При этом значение 0 — это полная прозрачность, а значение 1 — полная непрозрачность. Промежуточное значение, например 0.3 , задает полупрозрачность. Значение по умолчанию: 1 .

Синтаксис

Пример

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

Что такое opacity в CSS3?

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

Результат:

Создание Андроид игры на движке Unity

Программирование - все что с ним связано

Создание сайта с нуля | Полноценная верстка сайта

Тест на выбор языка

Не знаете какой язык изучать? Пройдите быстрый тест и определите какой язык программирования подходит именно вам!

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

Что такое RGBA?

Сначала давайте поговорим о том, что такое RGBA. RGB (что означает Red, Green, Blue — красный, зеленый, синий) — цветовая модель, позволяющая задавать цвет с помощью численных значений трех составляющих. Комбинируя их, можно получить множество различных оттенков.

На рисунке ниже показана палитра цветов Photoshop. Обратите внимание, что выбранный нами голубой цвет может обозначаться несколькими способами, включая знакомую шестнадцатеричную запись, которую мы бы использовали в CSS.

body <
background: #3792b3;
>

Можно задать тот же цвет в RGB, используя три десятичных значения (для красного, зеленого и синего).

body <
background: rgb(55,146,179);
>

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

RGBA расшифровывается как Red Green Blue Alpha. На W3C объясняется: «В этой спецификации цветовая модель RGB расширена и включает составляющую альфа, позволяющую задать непрозрачность цвета» Это значит, что можно добавить четвертое значение (от 1 до 0), чтобы задать уровень непрозрачности данного RGB-цвета. Для полной непрозрачности используется значение 1, для полной прозрачности — 0.

Например, мы можем сделать наш голубой цвет полупрозрачным, добавив .5 в качестве четвертого значения после значений RGB.

body <
background: rgba (55, 146, 179, .5);
>

Для одного и того же значения RGB можно добиться разной степени непрозрачности: 1 задает непрозрачность 100%, .75 дает тот же цвет, но с непрозрачностью 75%, .5 означает 50% и т. д.

Возможность задавать прозрачность цвета легко и быстро прямо в таблице стилей — это прекрасно. Но как насчет собственно свойства opacity и чем оно отличается от RGBA?

В CSS3 можно добавлять прозрачность с помощью свойства opacity. Просто задайте значение от 1 до 0, чтобы определить степень прозрачности любого элемента. Например, если вы хотите добиться непрозрачности 65% для всех абзацев на странице, можно написать такой код.

Значительная разница между opacity и RGBA заключается в том, что opacity задает прозрачность элемента и всего, что в нем содержится, тогда как RGBA задает прозрачность только фона или цвета элемента.

RGBA — необычайно гибкое средство, позволяющее задавать прозрачность цвета с помощью одной простой строки кода. Возможность управлять элементами дизайна через таблицы стилей вместо того, чтобы редактировать изображения, не только облегчает жизнь, но и позволяет работать быстрее и эффективнее — браузер берет на себя всю тяжелую работу. И, опять же, это перспективное направление в CSS, поэтому мы можем уже сейчас начать экспериментировать с новыми возможностями в браузерах, поддерживающих продвинутые стили (такие как RGBA).

К счастью, использование синтаксиса цветовой модели RGBA безопасно для браузеров, которые ее не поддерживают. Например, Internet Explorer просто проигнорирует такое правило.

Сейчас мы лишь поверхностно изучили возможности RGBA. Возможность задавать непрозрачность одновременно с цветом — гибкий и мощный инструмент, а RGBA — всего лишь один из способов добиться этого. Модель RGBA также позволяет сделать все быстро и легко, и за это мы ее любим.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *