Непрозрачность элементов css
opacity задаёт прозрачность как блоку, так и всем его дочерним элементам, поэтому, если назначить div opacity:50% , то как ни крути всё что внутри будет полупрозрачным. Вместо этого могу предложить сделать полупрозрачный background-color
body < background: black; >.scecialist-img < border-radius: 50%; width: 100%; height: 100%; >.specialist__img-container < height: 390px; width: 400px; >.scecialist-img-social < position: relative; left: 125px; top: 110px; >.specialist__socialmedia < position: relative; height: 390px; width: 400px; border-radius: 50%; top: -394px; transition: all 0.5s ease; background-color: rgba(0,0,0, .5); opacity: 0%; z-index: 10; >.specialist__socialmedia:hover
Отслеживать
ответ дан 18 янв в 23:47
Владлен Вожжаев Владлен Вожжаев
1,312 1 1 золотой знак 10 10 серебряных знаков 20 20 бронзовых знаков
- html
- css
- вёрстка
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
5 примеров, которые помогут понять, как работает CSS opacity
С помощью свойства CSS opacity можно контролировать CSS прозрачность HTML-элементов веб-страницы, таких как текст, изображения или фон. В данной статье мы расскажем об этом свойстве, а также приведем несколько примеров.
Как работает непрозрачность в CSS
Термин « непрозрачный » используется для описания объектов, которые полностью видимые. На веб-странице непрозрачный элемент имеет значение свойства opacity 1 , а полностью прозрачный — opacity , равное 0 . По умолчанию все элементы имеют opacity , равное 1 .
Значение от 0 до 1 определяет уровень прозрачности элемента. Например, следующий код уменьшит прозрачность CSS наполовину:
Элемент с непрозрачностью 0 будет полностью невидимым, но он все равно будет занимать физическое пространство на странице. Следовательно, чтобы сделать элемент видимым, нужно использовать в CSS свойство opacity , а также свойство visibility .
opacity было введено в CSS3 и на сегодняшний день хорошо поддерживается браузерами. Если ваш проект требует поддержки Internet Explorer 8 или более ранних версий, то нужно использовать свойство MS alpha filter следующим образом:
Обратите внимание, что прозрачность фона CSS может задаваться десятичными значениями от 0 до 1 , а значения непрозрачности альфа-фильтра — в диапазоне от 0% до 100%.
Управление непрозрачностью родительских и дочерних элементов
Непрозрачность применяется ко всему элементу равномерно. Непрозрачность дочерних элементов также зависит от значения свойства его родителей. Для достижения различных уровней прозрачности нужно применять разные значения непрозрачности для родительских и дочерних элементов. Например:
#parent < opacity: 0.8 >#child
Следующие примеры иллюстрируют, как дочерние элементы влияют на непрозрачность их родителей:
В первом примере для обоих полей задана непрозрачность 1 . Во втором примере родительское поле ( черное ) имеет непрозрачность 0.8 , а дочернее ( оранжевое ) — 1 . В третьем родительский элемент имеет непрозрачность 0.8 , а дочерний – 0.5 . Обратите внимание на разницу в цветовом тоне ( прозрачности ) оранжевого поля во всех трех примерах.
Использование свойства CSS opacity для создания прозрачных изображений
С помощью свойства opacity можно легко добавить прозрачность background CSS к изображениям. Предположим, что мы выводим одно и то же изображение на странице два раза. Следующий код сделает второе изображение прозрачным:
#img1 < opacity: 1 >#img2
В результате мы получим следующее:
Изменение непрозрачности при наведении курсора мыши
Также можно управлять CSS прозрачностью изображений или других HTML-элементов при наведении курсора мыши. Для этого в предыдущем примере нужно изменить значение свойства opacity . Следующий код сделает изображение прозрачным при наведении на него курсора мыши:
#img1 < opacity: 1 >#img1:hover < opacity: 0.6 >
Использование свойства CSS opacity для фона
Задать непрозрачность фона можно двумя способами. В первом указывается значение opacity , как мы делали в предыдущих примерах:
Во втором способе необходимо указать значение альфа-канала в RGBA ( красный, зеленый, синий, альфа ) в объявлении цвета фона. Это делается следующим образом:
Изменяя значения R , G и B , можно получить прозрачность background CSS любого цвета. Аналогично можно получить непрозрачные дочерние элементы внутри прозрачных родительских элементов. Как правило, значение непрозрачности родительского элемента выше, чем у дочерних. Тем не менее, с помощью прозрачного фона можно сделать дочерние видимыми, сохраняя при этом прозрачность их контейнера.
Прозрачные рамки с помощью CSS
Если вы используете большие рамки и вам необходимо применить к ним непрозрачность, то нужно установить для цвета рамки значение альфа-канала, как показано в следующем примере:
.image-box
На этом мы завершаем рассмотрение свойства CSS opacity . Мы привели примеры для различных случаев использования данного свойства, и надеемся, что они помогут вам лучше понять, как оно работает.
opacity
CSS-свойство opacity устанавливает непрозрачность элемента. Непрозрачность — это степень, в которой содержимое скрывается за элементом, является противоположностью прозрачности.
Интерактивный пример
opacity применяется к элементу в целом, включая его содержимое, даже если значение не наследуется дочерними элементами. Таким образом, элемент и его потомки имеют одинаковую непрозрачность относительно фона элемента, даже если они имеют различную непрозрачность относительно друг друга.
Использование opacity со значением, отличным от 1 , помещает элемент в новый контекст наложения (en-US) .
background: rgba(0, 0, 0, 0.4);
Синтаксис
Значения
-
-
: число в пределах от 0.0 до 1.0 , включительно, или проценты в пределах от 0% до 100% , включительно, представляет непрозрачность канала (т.е. значение его альфа-канала). Любое значение вне интервала, хотя и является валидным, округляется до ближайшего предела в диапазоне. Значение Действие 0 Элемент полностью прозрачен (он становится невидимым). Любое число строго между 0 и 1 Элемент полупрозрачный (т.е. содержимое элемента можно увидеть). 1 (значение по умолчанию) Элемент полностью непрозрачный (видимый).
Формальный синтаксис
Примеры
Базовый пример
div background-color: yellow; > .light opacity: 0.2; /* Едва видимый текст на фоне */ > .medium opacity: 0.5; /* Видимость текста более чёткая на фоне */ > .heavy opacity: 0.9; /* Видимость текста очень чёткая на фоне */ >div class="light">You can barely see this.div> div class="medium">This is easier to see.div> div class="heavy">This is very easy to see.div>
Различная непрозрачность с :hover
img.opacity opacity: 1; filter: alpha(opacity=100); /* IE8 и ниже */ zoom: 1; /* Триггеры "hasLayout" в IE 7 и ниже */ > img.opacity:hover opacity: 0.5; filter: alpha(opacity=50); zoom: 1; >img src="https://developer.mozilla.org/mdn-social-share.png" alt="MDN logo" width="128" height="146" class="opacity" />Проблемы доступности
Если непрозрачность текста регулируется, важно убедиться, что коэффициент контрастности между цветом текста и фоном, на котором размещён текст, достаточно высок, чтобы люди, испытывающие проблемы со слабым зрением, могли читать содержимое страницы.
Коэффициент цветовой контрастности определяется путём сравнения яркости текста с откорректированной непрозрачностью и значением цвета фона. Чтобы соответствовать действующим Рекомендациям по доступности веб-контента (WCAG), для текстового содержимого требуется соотношение 4.5:1 и 3:1 для более крупного текста, такого как заголовки. Большой текст определяется как 18.66px и жирный или крупнее, или 24px или выше.
- WebAIM: Color Contrast Checker
- MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
- Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
Спецификации
Specification CSS Color Module Level 4
# transparencyНачальное значение 1 Применяется к все элементы Наследуется нет Проценты map to the range [0,1] Обработка значения Тоже, что и указанное значение, после обрезки number до диапозона [0.0, 1.0]. Animation type by computed value type Поддержка браузерами
BCD tables only load in the browser
Смотрите также
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Прозрачность элементов CSS
В CSS есть три способа изменить прозрачность элемента:
с помощью свойства opacity ,
с помощью функции rgba() ,
с помощью функции hsla() .1. Свойство opacity
Свойство opacity позволяет сделать любой элемент веб-страницы частично или полностью прозрачным. Данное свойство изменяет прозрачность элементов, для которых установлено фоновое изображение (картинка) или задан фон с помощью цвета или градиента. Если элемент, для которого применено свойство opacity , содержит внутри себя другие элементы, то они также изменят свою прозрачность.
Свойство opacity принимает значения в диапазоне от 0 (полностью прозрачный) до 1 (непрозрачный), например:h1 div
2. Функция rgba()
Цветовая модель RGBA создает цветовой оттенок путем смешивания в необходимых пропорциях красного (Red), зеленого (Green) и синего (Blue) цветов, а альфа-канал (Alpha) отвечает за степень прозрачности цвета. В отличие от свойства opacity , для блока, содержащего другие элементы, функция rgba() изменит прозрачность только блока.
h1 div
3. Функция hsla()
Функция hsla() , параметры которой означают тон (Hue), насыщенность (Saturation), яркость (Lightness) и альфа-канал (Alpha), также позволяет задать полупрозрачный цвет.
Оттенки цвета задаются в процентах, используя соответствующее значение из цветового круга. Сам круг разбит на сектора, на границах которых находятся основные цвета:
0/360° — красный цвет
60° — желтый цвет
120° — зеленый цвет
180° — голубой цвет
240° — синий цвет
270° — фиолетовый цвет
300° — пурпурный цвет .Чтобы получить черный цвет, нужно присвоить показателям тона, насыщенности и яркости нулевое значение — hsla(0, 0%, 0%, 1) . Белый цвет получается при 100%-ном значении яркости hsla(0, 0%, 100%, 1) , а серый цвет — при нулевом значении насыщенности hsla(0, 0%, 50%, 1) .
Удобный конвертер цветов вы найдете здесь.
-