Прозрачность opacity
Свойство opacity
определяет уровень прозрачности элемента.
Прозрачность изображения
Свойство opacity
принимает значение от 0.0 до 1.0. Чем меньше значение, тем прозрачнее элемент:
opacity 0.2
opacity 0.5
opacity 1
(по умолчанию)
img { opacity: 0.5; }
Изменение прозрачности при наведении мыши
Очень часто свойство opacity
используется вместе с селектором :hover
, чтобы изменять прозрачность элемента при наведении на него мыши:
img { opacity: 0.5; } img:hover { opacity: 1.0; }
Объяснение примера
Первая CSS декларация аналогична той, что мы приводили в первом примере. Дополнительно к этому, мы добавили то, что должно происходить, когда пользователь наводит на одно из изображений. В данном случае при наведении пользователем мыши, отменяется прозрачность изображения. CSS код для этого — opacity: 1;
.
Когда указатель мыши уводится с изображения, оно опять становится прозрачным.
Ниже пример с обратным эффектом:
img:hover { opacity: 0.5; }
Прозрачный блок
Если к фону элемента добавлять прозрачность при помощи свойства opacity
, то все дочерние элементы будут наследовать эту прозрачность. Это может привести к тому, что текст внутри полностью прозрачного элемента будет трудно читать:
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
Пример:
div { background-color: green; opacity: 0.3; }
Определение прозрачности при помощи RGBA
Если вы хотите, чтобы прозрачность не применялась к дочерним элементам, как в примере выше, то вы можете использовать RGBA значения цвета. В следующем примере прозрачность задается только для фонового цвета, но не для текста:
100% opacity
60% opacity
30% opacity
10% opacity
В главе Как использовать цвета вы узнали, что вы можете использовать RGB как значение цвета. Дополнительно к этому вы можете использовать RGB значение цвета с альфа-каналом (RGBA), который определяет прозрачность цвета.
RGBA значение цвета определяется CSS функцией rgba(red, green, blue, alpha). Параметр alpha — это число от 0.0 (полная прозрачность) до 1.0 (полная непрозрачность).
Подробнее о RGBA цветах вы можете прочитать в главе RGB цвета.
Пример:
div { background: rgba(76, 175, 80, 0.3) /* Фон зеленого цвета с 30% прозрачностью */ }
Текст в прозрачном блоке
Это кое-какой текст, размещенный в прозрачном блоке.
<html> <head> <style> div.background { background: url(klematis.jpg) repeat; border: 2px solid black; } div.transbox { margin: 30px; background-color: #ffffff; border: 1px solid black; opacity: 0.6; } div.transbox p { margin: 5%; font-weight: bold; color: #000000; } </style> </head> <body> <div> <div> <p>Это кое-какой текст, размещенный в прозрачном блоке.</p> </div> </div> </body> </html>
Объяснение примера
Сначала мы создаем элемент <div> (class=»background») с фоновым изображением и рамкой.
Затем мы создаем еще один элемент <div> (class=»transbox») внутри первого элемента <div>.
У элемента <div> есть фоновый цвет и рамка, сам элемент прозрачный.
Внутри прозрачного элемента <div> мы добавили кое-какой текст, обернутый в тег <p>.
цветов. Следует ли использовать rgba (0, 0, 0, 0) или rgba (255, 255, 255, 0) для прозрачности в CSS?
спросил
Изменено 2 года, 5 месяцев назад
Просмотрено 202 тысячи раз
Следует ли использовать rgba(0, 0, 0, 0)
или rgba(255, 255, 255, 0)
Каковы плюсы и минусы каждого из них?
- css
- цвета
2
Последним параметром функции rgba()
является параметр «альфа» или «непрозрачность». Если вы установите его на 0
, это будет означать «полностью прозрачный», и первые три параметра ( красный
, зеленый
и синий
каналы) не будут иметь значения, потому что вы не сможете видеть все-таки цвет.
Имея это в виду, я бы выбрал rgba(0, 0, 0, 0)
, потому что:
- меньше печатать,
- удерживает несколько лишних байтов в файле CSS, а
- вы увидите очевидную проблему, если альфа-значение изменится на что-то нежелательное.
Вы могли бы полностью отказаться от модели
и вместо этого использовать ключевое слово Transparent
, которое, согласно w3.org, эквивалентно «прозрачному черному» и должно вычисляться до rgba(0, 0, 0, 0)
. Например:
h2 { цвет фона: прозрачный; }
Это сэкономит вам еще пару байтов, в то время как ваши намерения использовать прозрачность очевидны (если кто-то не знаком с RGBA).
Начиная с CSS3, вы можете использовать ключевое слово Transparent
для любого свойства CSS, которое принимает цвет.
0
Существует два способа сохранения цвета с альфа-каналом. Первый именно такой, каким вы его видите, с каждым компонентом как есть. Второй — использовать pre-multiplied alpha , где значения цвета умножаются на альфу после преобразования ее в диапазон 0.0-1.0; это сделано для облегчения компоновки. Обычно вы не должны замечать или заботиться о том, какой способ реализован каким-либо конкретным движком, но есть крайние случаи, когда вы могли бы, например, если вы попытались увеличить непрозрачность цвета. Если вы используете rgba(0, 0, 0, 0)
, вы с меньшей вероятностью увидите разницу между двумя подходами.
1
Есть небольшая разница, когда вы используете rgba(255,255,255, и ), цвет фона становится все более и более светлым по мере того, как значение « a » увеличивается с 0,0 до 1,0. Где, как и при использовании rgba(0,0,0, a ), цвет фона становится все более и более темным по мере увеличения значения « a » с 0,0 до 1,0. Сказав это, ясно, что и (255,255,255,0), и (0,0,0,0) составляют фон прозрачный. (255,255,255,1) сделает фон полностью белым, тогда как (0,0,0,1) сделает фон полностью черным.
4
Я бы рекомендовал использовать rgba(255,255,255,0)
, потому что сломанное (самое новое) сафари считает, что если вы используете прозрачный
или rgba(0,0,0,0)
в линейном градиенте, вы действительно имеете в виду серый
, Для получения дополнительной информации см. Что происходит в Safari с прозрачным цветом?
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Обязательно, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Могу ли я отправить электронное письмо… rgba()
Могу ли я отправить электронное письмо… rgba()Gmail
Настольная веб-почта
2021-08
1 2
iOS
2021-08
1 2
Андроид
2021-08
1 2
Мобильная веб-почта
2021-08
1 2
Перспектива
Окна
2007
2010
2013
2016
2019
Почта Windows
2021-01
macOS
2021-01
Outlook.
com2021-01
iOS
2021-01
Андроид
4.2101.0
Яху! Почта
Настольная веб-почта
2021-01
1
iOS
2021-01
1
Андроид
6.16.2.1519779
1
АОЛ
Настольная веб-почта
2021-05
1
iOS
2021-05
1
Андроид
2021-05
1
Мозилла Тандерберд
ПротонПочта
Настольная веб-почта
2021-05
iOS
2021-05
Андроид
2021-05
Быстрая почта
Настольная веб-почта
2021-07
ПРИВЕТ
Настольная веб-почта
2021-05
Апельсин
Настольная веб-почта
2021-05
iOS
2021-01
Андроид
2021-01