Html opacity: opacity — CSS: Cascading Style Sheets

Leave a Comment / Html / By /

opacity | CSS | WebReference

  • Содержание
    • Краткая информация
    • Синтаксис
    • Значения
    • Песочница
    • Пример
    • Примечание
    • Спецификация
    • Браузеры

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

Значение по умолчанию1
НаследуетсяНет
ПрименяетсяКо всем элементам
АнимируетсяДа

Синтаксис 

opacity: <число>

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.
<время>#

Значения

В качестве значения выступает число из диапазона [0.0; 1.0]. Значение 0 соответствует полной прозрачности элемента, 1, наоборот — его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

div {
  opacity: {{ playgroundValue }};
}

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>opacity</title> <style> .semi { opacity: 0.5; /* Полупрозрачность элемента */ } </style> </head> <body> <p> <img src=»image/igels.png» alt=»Обычный рисунок»> <img src=»image/igels. png» alt=»Полупрозрачный рисунок»> </p> </body> </html>

Результат данного примера показан на рис. 1.

Рис. 1. Результат использования opacity

Объектная модель

Объект.style.opacity

Примечание

Firefox до версии 3.5 поддерживает свойство -moz-opacity.

Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где параметр opacity может принимать значение от 0 до 100.

Спецификация

СпецификацияСтатус
CSS Color Module Level 3Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

912191.213.5
1193.2

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

Рецепты

  • Как сделать мигающий текст?

Практика

  • Мигающий текст
  • Прозрачность при наведении
  • Прозрачность при наведении

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 02.03.2020

Редакторы: Влад Мержевич

opacity · WebPlatform Docs

Резюме

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

Обзорная таблица

Исходное значение
1
Применяется к
Все элементы
Унаследовано
Нет
СМИ
визуальный
Расчетное значение
[[Вычисляемое значение:: То же, что и указанное значение после обрезки <альфа-значения> до диапазона [0.0,1.0]]]
Анимируемый
Да
Свойство объектной модели CSS
непрозрачность
Проценты
Н/Д

Синтаксис

  • непрозрачность: альфа-значение
  • непрозрачность: наследовать

Значения

альфа-значение
Значение с плавающей запятой в диапазоне от 0,0 (полностью прозрачный) до 1,0 (полностью непрозрачный) включительно. Любые значения вне диапазона будут зафиксированы в этом диапазоне.
унаследовать
Указывает, что свойство принимает то же вычисленное значение, что и свойство родительского элемента.

Примеры 

 .пример1 {
  непрозрачность: 0,5;
}

Просмотреть живой пример

Использование 

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

Важно отметить, что непрозрачность влияет не только на данный элемент, но и на все содержащиеся в нем элементы.

Примечания

Параметр непрозрачности применяется равномерно ко всему объекту. Любые значения за пределами диапазона от 0,0 до 1,0 будут ограничены этим диапазоном.

Непрозрачность объекта или группы концептуально можно рассматривать как операцию постобработки. Концептуально, после рендеринга объекта или группы в закадровое изображение RGBA параметр непрозрачности объекта или группы указывает, как смешать закадровое изображение с текущим фоном.

Обратите внимание, что установка для этого свойства значения меньше 1 создает новый контекст стека. Для получения дополнительной информации см. «Что вам никто не говорил о Z-индексе» Филипа Уолтона.

Связанные характеристики

Модуль цвета CSS, уровень 3
Рекомендация

См. также

Статьи по теме

Визуальные эффекты

  • цвет

  • Цвета по оттенку

  • Цвета по названию

  • Цвета по насыщенности

  • Пользовательские системные цвета

  • -мс-высокая контрастность

  • мс-высокая контрастность-регулировка

  • -ms-прогресс-внешний вид

  • фоновый режим наложения

  • зажим

  • курсор

  • непрозрачность

  • зум

  • высота

  • мигает

  • фильтр

  • Анимация JavaScript

Связанные страницы

  • CSSStyleDeclarationCSSStyleDeclaration
  • текущий стиль текущий стиль
  • стильстиль
  • по умолчаниюпо умолчанию
  • среда выполненияStyleruntimeStyle
  • аа

Атрибуции

  • Новички
  • Концепции
  • HTML
  • УСБ
  • Доступность
  • JavaScript
  • ДОМ
  • СВГ

Непрозрачность текста CSS

html

4 месяца назад

от Aqsa Yasin

Непрозрачность определяется в CSS как «прозрачность». Непрозрачность текста — это эффект прозрачности, который мы применяем к любому тексту. У нас есть два разных свойства в CSS для установки непрозрачности текста. Чтобы установить непрозрачность текста, мы будем использовать свойство «непрозрачность», а также альфа-значение, которое определяет непрозрачность текста в «RGBA». Используя свойство opacity и изменяя значение альфа-канала в RGBA, мы можем настроить непрозрачность текста в CSS. Непрозрачность находится в диапазоне от «0,0» до «1,0». «Абсолютно прозрачный» цвет имеет значение «0,0», а «полностью непрозрачный» цвет имеет значение «1,0». В этом руководстве мы будем использовать свойства CSS для изменения прозрачности текста.

Пример № 1: Использование свойства непрозрачности

Нам нужно несколько абзацев, чтобы использовать функцию непрозрачности в CSS. Здесь мы создадим несколько абзацев HTML. Для этого мы должны сначала создать файл HTML. Visual Studio Code — это программное обеспечение, которое мы будем использовать для выполнения этих примеров. Вы можете сделать это в любой программе, например в блокноте. Мы создаем несколько классов «div» с разными именами в теле. Внутри каждого div мы создаем абзац с тегом «

». Мы собираемся создать три элемента div с уникальными именами, такими как «t1», «t2» и «t3». Мы создаем абзацы внутри этих div. В результате получилось три абзаца. Мы будем использовать этот HTML-код и для других примеров. Теперь мы перейдем к файлу CSS и применим непрозрачность CSS к тексту. В элементе «head» HTML-кода мы дополнительно привязали файл CSS к этой HTML-странице.

Мы устанавливаем исходный «красный» цвет заголовка с помощью свойства «color» и стилизуем этот заголовок как «курсив». Затем мы используем имя первого div «t1», в котором у нас есть абзац, и устанавливаем его «размер шрифта» на «16px». Мы используем «красный» для шрифта «цвет». Но в следующей строке мы используем свойство «непрозрачность». Итак, когда мы используем это свойство, оно добавит некоторую непрозрачность к эффекту прозрачности нашего цвета текста. Здесь мы устанавливаем значение «0,8» для этого свойства «непрозрачности». Для следующего абзаца «div.t2» мы устанавливаем тот же «размер шрифта» «16px» и тот же «красный» «цвет». Но на этот раз значение «непрозрачности» изменено на «0,5» для второго абзаца блока div. Для третьего и последнего «div.t3» мы используем «0,3» в качестве значения «непрозрачности».

Вот вывод, видите, что цвет текста появляется с разными значениями непрозрачности. Цвет заголовка — исходный красный цвет, но цвет абзацев отображается с некоторыми значениями непрозрачности. Все три абзаца имеют разные значения непрозрачности.

Пример № 2: Использование альфа-значения в RGBA

Здесь мы собираемся использовать значения RGBA, в которых «а» означает альфа-значение, и это альфа-значение устанавливает непрозрачность текста. Во-первых, мы просто помещаем значение RGB в заголовок, и значение RGB, которое мы здесь используем, представляет «фиолетовый» цвет. Затем мы используем ключевое слово «курсив» для установки «стиля шрифта» заголовка. Мы также устанавливаем его как «семейство шрифтов» и используем для этого «алжирский» шрифт. Он выравнивается по «центру» с помощью свойства «text-align».

Затем мы собираемся использовать первый «div.t1» и использовать значение «RGBA». Здесь мы помещаем значение «RGB» фиолетового цвета, а затем устанавливаем его альфа-значение также на «0,9». После этого мы установили то же значение «RGB», но изменили значение альфа-канала и установили его на «0,7». Кроме того, у нас есть еще один абзац div, и для этого последнего абзаца «div.t3» мы используем значение альфа «0,5», которое устанавливает его непрозрачность на значение «0,5».

Обратите внимание на изменение цвета текста в зависимости от значения альфа-канала. Цвет заголовка — оригинальный фиолетовый. Но цвет абзацев имеет некоторые альфа-значения, которые определяют его непрозрачность. Значения непрозрачности во всех трех абзацах разные.

Пример № 3:

Во-первых, мы собираемся установить «фоновый цвет» всего тела и установить его на «черный». Затем мы снова используем значения RGBA, где «а» означает альфа-значение. Это альфа-значение определяет непрозрачность текста, как мы обсуждали выше. Для начала мы просто добавляем значение RGB к заголовку, число RGB, которое мы здесь используем, символизирует цвет «светло-серый». Мы используем первый «div.t1» и значение «rgba», где мы вставляем значение «RGB» того же цвета, что и заголовок, и устанавливаем его альфа-значение на «0,7». После этого устанавливаем то же значение «RGB», что и раньше. На этот раз мы изменили значение альфа на «0,4». У нас также есть еще один абзац div, и мы используем значение альфа «0,2», чтобы изменить непрозрачность этого последнего абзаца «div.t3» на «0,2».

Обратите внимание на изменение цвета текста при изменении значения альфа-канала. Заголовок имеет исходный цвет, но цвет абзацев включает альфа-значения, определяющие их непрозрачность. Все три абзаца имеют разные значения непрозрачности.

Пример № 4:

Здесь мы создаем девять разных классов div с уникальным именем для каждого div и применим все значения непрозрачности к каждому div отдельно в CSS.

Мы стилизуем все тело и размещаем текст в «центре» страницы. Таким образом, все абзацы появляются в «центре». Мы также установили «полужирный» для всего «тела» с помощью «шрифта шрифта» и установили размер шрифта или текста «20 пикселей». Наш заголовок будет иметь исходный «бордовый» цвет, поскольку мы устанавливаем этот цвет в свойстве «color». «Алжирский» — это «семейство шрифтов» для заголовка. Мы устанавливаем один и тот же цвет для всех div, используя свойство «color». Во всех абзацах div мы изменили значение «opacity». В каждом div мы уменьшаем значение непрозрачности на единицу, для других div мы устанавливаем значение «opacity» на «0,9».». Затем для следующего div мы устанавливаем значение этого свойства непрозрачности на «0,8». Для третьего div мы используем значение непрозрачности «0,7» и так далее. Таким образом, мы меняем значения непрозрачности каждый раз для каждого div.

Посмотрите на вывод ниже, значения непрозрачности текста начинаются с «0,9» и заканчиваются на «0,1».

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

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