opacity css что это

5 примеров, которые помогут понять, как работает CSS opacity

С помощью свойства CSS opacity можно контролировать CSS прозрачность HTML-элементов веб-страницы, таких как текст, изображения или фон. В данной статье мы расскажем об этом свойстве, а также приведем несколько примеров.

Как работает непрозрачность в CSS

Значение от 0 до 1 определяет уровень прозрачности элемента. Например, следующий код уменьшит прозрачность CSS наполовину:

opacity было введено в CSS3 и на сегодняшний день хорошо поддерживается браузерами. Если ваш проект требует поддержки Internet Explorer 8 или более ранних версий, то нужно использовать свойство MS alpha filter следующим образом:

Управление непрозрачностью родительских и дочерних элементов

Непрозрачность применяется ко всему элементу равномерно. Непрозрачность дочерних элементов также зависит от значения свойства его родителей. Для достижения различных уровней прозрачности нужно применять разные значения непрозрачности для родительских и дочерних элементов. Например:

Следующие примеры иллюстрируют, как дочерние элементы влияют на непрозрачность их родителей:

Использование свойства CSS opacity для создания прозрачных изображений

С помощью свойства opacity можно легко добавить прозрачность background CSS к изображениям. Предположим, что мы выводим одно и то же изображение на странице два раза. Следующий код сделает второе изображение прозрачным:

В результате мы получим следующее:

Изменение непрозрачности при наведении курсора мыши

Использование свойства CSS opacity для фона

Во втором способе необходимо указать значение альфа-канала в RGBA ( красный, зеленый, синий, альфа ) в объявлении цвета фона. Это делается следующим образом:

Прозрачные рамки с помощью CSS

Если вы используете большие рамки и вам необходимо применить к ним непрозрачность, то нужно установить для цвета рамки значение альфа-канала, как показано в следующем примере:

Дайте знать, что вы думаете по данной теме статьи в комментариях. За комментарии, отклики, лайки, подписки, дизлайки огромное вам спасибо!

Источник

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью.

Opacity в Firefox, Safari, Chrome, Opera и IE9

Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах.

Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%).

Opacity в Internet Explorer 8 и ниже

Internet Explorer 8 и более ранняя версия поддерживает только свойство Microsoft «alpha filter» для контроля прозрачности элемента.

Opacity в разных браузерах

Комбинируя оба вышеуказанных шага, вы получите прозрачность для всех браузеров.

Включение alpha filter для управления прозрачностью в Internet Explorer 8 и более ранних версиях создает недопустимый код в таблице стилей, поскольку это свойство только для Microsoft, а не стандартное свойство CSS.

Opacity для изображений

Все три изображения на иллюстрации ниже взяты из одного исходного изображения. Единственные различия между ними — уровень их непрозрачности.

Изменение opacity при наведении мыши

В следующем примере демонстрируется распространенное использование непрозрачности изображения CSS — когда непрозрачность изображений изменяется при наведении указателя мыши на изображение.

Наведите указатель мыши на изображения, чтобы увидеть эффект.

Текст в прозрачном поле

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

Чтобы предотвратить это, вы можете использовать прозрачные изображения в формате PNG или поместить текстовый блок за пределы прозрачного блока и визуально вставить его внутрь, используя отрицательное поле margin или абсолютное позиционирование.

Прозрачность с использованием RGBA

В дополнение к RGB CSS3 представил новый способ — RGBA (Red Blue Green Alpha) для указания цвета, который включает альфа-прозрачность как часть значения цвета.

Указание цвета в формате RGBA — это очень простой способ установить прозрачность.

Первые три числа, представляют цвет в значениях RGB, т.е. красный (0-255), зеленый (0-255), синий (0-255), а четвертое, представляет значение альфа-прозрачности в диапазоне от 0.0 до 1.0 ( 0 делает цвет полностью прозрачным, тогда как значение 1 делает его полностью непрозрачным).

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

Или измените только прозрачность фона.

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

Объявление запасного цвета

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

Internet Explorer 8 и более ранние версии не поддерживают цвета RGBA. Они используют gradient filter для достижения эффекта RGBA, использование которого не рекомендуется.

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Руководство по таблицам в CSS

Руководство по свойству margin в CSS

Руководство по выравниванию элементов в CSS

Разработка сайтов для бизнеса

Если у вас есть вопрос, на который вы не знаете ответ — напишите нам, мы поможем разобраться. Мы всегда рады интересным знакомствам и новым проектам.

Источник

Блог Vaden Pro

CSS прозрачность и особенности применения

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

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

Теория и практика

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

В браузере будет примерно такая картинка:

Попрактиковались? Теперь подойдем ближе к теоретической стороне рассматриваемого вопроса.

Свойство opacity, которое отвечает за эффект CSS прозрачности, было создано на основе спецификации CSS3. В его значении указывается степень непрозрачности элемента в десятичных долях. Говоря более понятным языком, запись значения 0.9 для изучаемого свойства в нашем примере означает, что элемент, которому присвоено свойство, не прозрачен на 90%. Соответственно, если будет указан в значении 0, то наш блок станет полностью прозрачным и не будет заметен. Не смотря на это, он не исчезает со страницы, так как остается зарезервированное место для него среди элементов.

Главная проблема в использовании этого свойства заключается в показателе его кроссбраузерности. Так как свойство считается относительно молодым, то старые версии некоторых браузеров могут конфликтовать с ним. Чтобы этого избежать, нужно воспользоваться следующими свойствами и скриптом:

К нежелательным эффектам использования этих вспомогательных свойств относится их неспособность пройти проверку на валидацию. Кстати само свойство opacity без проблем проходит проверку только в CSS Level 3 (так как свойство было включено именно в эту спецификацию).

Чуть не забыл отметить еще один каприз его величества Internet Explorer. В некоторых версиях может не пройти прозрачность, если не указаны ширина и высота контейнера. Но паниковать еще рано, так как этот баг легко можно исправить с помощью такой записи:

Это свойство должно относиться к стилю просвечиваемого блока.

На заметку

При назначении родительскому блоку прозрачности все его дочерние элементы становится тоже полупрозрачными, что приводит к ухудшению читабельности текста этого контейнера. Чтобы избежать этого нежелательного эффекта требуется просвечивать только фон. Для этого создается отдельный контейнер для фона, и отдельный – для контента. Не забываем установить уровень наложения контента с помощью свойства z-index, в противном случае требуемый эффект достигнут не будет.

Вот так будет выглядеть наше решение в браузере

Стоит отметить, что прозрачность была увеличена специально, чтобы подчеркнуть тот факт, что контент не подсвечивается.

Затемнение фона

Иногда дизайнер требует затемнить фон страницы. Данная задача абсолютно аналогична предыдущему случаю. Для ее реализации просто необходимо взять черный фон и слегка его осветлить.

Не вижу смысла нагружать Вас новым кодом и предлагаю работать с предыдущим. В прошлой записи меняем только цвет фона с синего на черный и цвет шрифта на красный, чтобы сохранялся контраст. Да, еще думаю, для более эффективного затемнения повысим уровень непрозрачности до 0.7. Теперь, чтобы создать эффект затемнения, контейнер с черным фоном должен накладываться на контент, что также достигается через z-index.

Наш предыдущий код принимает вид (HTML оставляем без изменений):

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Дополнение

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

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

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

Источник

Opacity css что это

Прозрачность в CSS довольно модная техника в последнее время, которая вызывает трудности в кроссбраузерной реализации. До сих пор не существует универсального метода, который бы позволял реализовать прозрачность для всех браузеров. Однако в последнее время ситуация заметно улучшилась.

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

Стоит упомянуть следующий момент: несмотря на то что прозрачность используется вот уже в течение нескольких лет, она никогда не была частью стандарта CSS. Это нестандартное свойство, которое должно стать частью спецификации CSS3.

Старый подход

В старых версиях Firefox и Safari необходимо применять свойство следующим образом:

Свойство -khtml-opacity использовалось в старых версиях webkit-браузеров. Это свойство устарело и больше не нужно, кроме случаев когда вы уверены, что значительная часть трафика вашего сайта исходит от посетителей, использующих Safari 1.x, что, конечно, маловероятно.

В следующей строке используется свойство -moz-opacity, которое работало на очень ранних версиях движка Mozilla. Firefox прекратил его поддержку в версии 0.9.

CSS прозрачность в Firefox, Safari, Chrome и Opera

Для большинства современных браузеров достаточно использовать следующее свойство:

В приведённом примере, элементу устанавливается значение непрозрачности 70% (30% прозрачности). То есть если мы установим значение в единицу, то элемент будет непрозрачным, и, соответственно, установка этого значения в ноль, сделает его невидимым.

Свойством opacity обрабатывается 2 десятичных цифры. То есть значение «.01» будет отличаться от значения «.02», хоть это и мало заметно.

CSS прозрачность для Internet Explorer

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

В этом примере используется свойство filter, которое работает в версиях 6-8, однако для версий 6 и 7 есть одно ограничение: у элемента свойство hasLayout должно быть установлено в true. Это свойство присутствует только в IE и подробнее о нём можно почитать, например, на Хабре.

Установка и изменение CSS прозрачности с помощью JavaScript или jQuery

Вы можете использовать следующий код для установки прозрачности:

Конечно же, в этом случае гораздо проще использовать jQuery, кроме того, работать будет во всех браузерах:

Вы можете анимировать это свойство:

Функция RGBA

В CSS3 планируется поддержка альфа-канала с помощью функции rgba. Эта функция работает в Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+. Используется она так:

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

Функция HSLA

Подобно предыдущей функции, CSS3 также позволяет задать полупрозрачный цвет с помощью функции HSLA, параметры которой означают тон (Hue), насыщенность (Saturation), яркость (Lightness) и альфа-канал (Alpha).

Подробнее об этой функции можно почитать на сайте W3.org.

Источник