Непрозрачность
Embed This Widget
Add the script tag and a data attribute to embed this widget.
Embed via iframe for maximum compatibility.
<iframe src="https://colorfyi.com/iframe/glossary/opacity/" width="420" height="400" frameborder="0" style="border:0;border-radius:10px;max-width:100%" loading="lazy"></iframe>Paste this URL in WordPress, Medium, or any oEmbed-compatible platform.
https://colorfyi.com/glossary/opacity/Add a dynamic SVG badge to your README or docs.
[](https://colorfyi.com/glossary/opacity/)Use the native HTML custom element.
Степень, в которой цвет или элемент перекрывает содержимое за ним: 100% — полностью непрозрачный, 0% — полностью прозрачный.
Opacity is the inverse of transparency. In CSS, opacity can be set using the opacity property (which affects the entire element and its children) or using alpha-channel color values like rgba() and hsla(). Opacity is essential for creating layered visual effects, overlay patterns, glass-morphism designs, and subtle background tints. When compositing semi-transparent colors, the visible result depends on both the foreground color and whatever is behind it, following the alpha compositing formula defined by Porter and Duff.
Попробовать
Похожие статьи
Создание веб-компонента выбора цвета с нуля
Создайте доступный выбор цвета в виде Web Component. Реализуйте рендеринг на canvas, ползунки оттенка, альфа-канал и пользовательские события через Shadow DOM.
Изумрудный, нефритовый, лесной зелёный: руководство по сравнению оттенков
Сравните изумрудный (#50C878), нефритовый (#00A86B) и лесной зелёный (#228B22). Узнайте о визуальных различиях и hex-кодах этих популярных оттенков зелёного.
CSS-функция light-dark(): нативное переключение тем
Используйте CSS light-dark() для нативного переключения тем. Замените JavaScript-переключатели и медиазапросы одной CSS-функцией для цветов светлого и тёмного режима.
Цветоделение для печати: как подготовить файлы
Разберитесь в CMYK-цветоделении, плашечных цветах, треппинге и регистрационных метках. Подготовьте файлы, готовые к печати, с правильными цветоделёнными пластинами.
Hex-коды цветов: полное руководство
Освойте hex-коды цветов с нуля. Узнайте, что означает #RRGGBB, как читать любое hex-значение, сокращённую нотацию, прозрачность альфа-канала и как конвертировать между форматами.
Дизайн для режима высокой контрастности: Windows, macOS и веб
Проектируйте для режима высокой контрастности в Windows, macOS и на вебе. Узнайте о CSS forced-colors, ключевых словах системных цветов, стратегиях тестирования и типичных ошибках.