Как сделать прозрачный фон в css
Добавил пользователь Евгений Кузнецов Обновлено: 04.10.2024
CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью.
Opacity в Firefox, Safari, Chrome, Opera и IE9
Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах.
Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%).
Свойство opacity принимает значение от 0.0 до 1.0 . Настройка opacity: 1; сделает элемент полностью непрозрачным (то есть 0% прозрачным), тогда как opacity: 0; сделает элемент полностью прозрачным (то есть 100% прозрачным).
Opacity в Internet Explorer 8 и ниже
Internet Explorer 8 и более ранняя версия поддерживает только свойство Microsoft "alpha filter" для контроля прозрачности элемента.
Альфа-фильтры в IE принимают значения от 0 до 100 . Значение 0 делает элемент полностью прозрачным (т.е. 100% прозрачным), тогда как значение 100 делает элемент полностью непрозрачным (то есть 0% прозрачным).
Opacity в разных браузерах
Комбинируя оба вышеуказанных шага, вы получите прозрачность для всех браузеров.
Включение alpha filter для управления прозрачностью в Internet Explorer 8 и более ранних версиях создает недопустимый код в таблице стилей, поскольку это свойство только для Microsoft, а не стандартное свойство CSS.
Opacity для изображений
Вы также можете создавать прозрачные изображения, используя CSS-свойство opacity .
Все три изображения на иллюстрации ниже взяты из одного исходного изображения. Единственные различия между ними — уровень их непрозрачности.
| opacity:1 | opacity:0.5 | opacity:0.25 |
Изменение opacity при наведении мыши
В следующем примере демонстрируется распространенное использование непрозрачности изображения CSS — когда непрозрачность изображений изменяется при наведении указателя мыши на изображение.
Наведите указатель мыши на изображения, чтобы увидеть эффект.
Текст в прозрачном поле
При использовании свойства opacity не только фон элемента, но и все его дочерние элементы также становятся прозрачными. Это затрудняет чтение текста внутри прозрачного элемента, если значение непрозрачности становится выше.
| OPACITY | OPACITY | OPACITY | 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 | RGBA |
Или измените только прозрачность фона.
| RGBA | RGBA | RGBA | RGBA |
Вы можете контролировать прозрачность отдельных элементов, а не всего элемента, используя RGBA. Однако всегда рекомендуется определять запасной цвет для браузеров, которые не поддерживают формат RGBA.
Прозрачность RGBA не влияет на дочерние элементы, как свойство opacity . Альфа-значение RGBA влияет на прозрачность отдельных значений цвета, а не всего элемента.
Объявление запасного цвета
Не все браузеры поддерживают цвета RGBA. Тем не менее, вы можете предоставить альтернативу, такую как сплошной цвет в формате RGB или прозрачное изображение PNG для браузеров, которые не поддерживают свойство RGBA.
Internet Explorer 8 и более ранние версии не поддерживают цвета RGBA. Они используют gradient filter для достижения эффекта RGBA, использование которого не рекомендуется.
Насколько публикация полезна?
Нажмите на звезду, чтобы оценить!
Средняя оценка 5 / 5. Количество оценок: 1
Оценок пока нет. Поставьте оценку первым.
Похожие посты
Руководство по таблицам в CSS
Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…
Руководство по свойству margin в CSS
CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…
Руководство по выравниванию элементов в CSS
Текст внутри блочных элементов можно выровнять, правильно настроив выравнивание текста с помощью text-align. Смотрите Руководство по форматированию текста в CSS, чтобы узнать больше о форматировании текста. Выравнивание по центру с помощью auto margin Выравнивание по центру блочного элемента является одним из наиболее важных следствий CSS-свойства margin. Например, контейнер
Разработка сайтов для бизнеса
Если у вас есть вопрос, на который вы не знаете ответ — напишите нам, мы поможем разобраться. Мы всегда рады интересным знакомствам и новым проектам.
Каждый блок html-элемента имеет фоновый слой, который может быть полностью прозрачным (по умолчанию) или заполнен цветом и/или одним или несколькими изображениями. CSS-свойства фона указывают, какой цвет background-color и изображения background-image использовать, а также их размер, расположение, способ укладки и т.д.
Свойства фона не наследуются, но фон родительского блока будет просвечивать по умолчанию из-за начального значения в background-color: transparent .
Фон не отображается у пустых элементов с нулевой высотой. Отрицательные значения свойства margin не влияют на фон элемента.
Свойства фона html-элементов
1. Базовый цвет: свойство background-color
Свойство background-color устанавливает цвет фона элемента. Цвет рисуется за фоновыми изображениями. Для блочных элементов цвет фона распространяется на всю ширину и высоту блока элемента, для строчных — только на область их содержимого.
Цвет фона обрезается в соответствии со значением background-clip самого нижнего слоя фонового изображения.
Свойство не наследуется.
| background-color | |
|---|---|
| Значения: | |
| цвет | Значение принимает все форматы цвета свойства color. Значение по умолчанию transparent . |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Рис. 1. Свойство background-color для разных элементов
2. Источник изображения: свойство background-image
Свойство background-image устанавливает фоновое изображение (одно или несколько) элемента. Значение none считается слоем изображения, но ничего не рисует. Изображение, которое является пустым (нулевой ширины или нулевой высоты), которое не загружается или не может быть отображено (например, потому что оно не в поддерживаемом формате изображения) также считается слоем, но ничего не рисует.
Семантически важные изображения должны предоставляться в разметке документа, например, с тегом .
Свойство не наследуется.
| background-image | |
|---|---|
| Значения: | |
| изображение | Обозначает 2D-изображение. Это может быть ссылка на URL, нотация image() или запись градиента. Значение по умолчанию none . |
| inherit | Наследует значение свойства от родительского элемента. |
3. Укладка изображений: свойство background-repeat
Свойство background-repeat определяет, как фоновые изображения укладываются в области фона после того, как для них установлены размеры и позиционирование. Если значение свойства имеет два ключевых слова, первое используется для горизонтального направления, второе — для вертикального.
Свойство не наследуется.
| background-repeat | |
|---|---|
| Значения: | |
| repeat-x | Изображение повторяется в горизонтальном направлении. Вычисляется в repeat no-repeat . |
| repeat-y | Изображение повторяется в вертикальном направлении. Вычисляется в no-repeat repeat . |
| repeat | Изображение повторяется в обоих направлениях так часто, чтобы покрыть область отрисовки фона. Если изображение не помещается, оно обрезается. Вычисляется в repeat repeat . Значение по умолчанию. |
| space | Изображение повторяется столько раз, сколько оно помещается в области фона, не обрезаясь, изображения расположены на равном расстоянии друг от друга. Первое и последнее изображения касаются краев области. Если область рисования фона больше, чем область позиционирования фона, шаблон повторяется, чтобы заполнить область рисования фона. Если недостаточно места для двух копий изображения, то размещается только одно изображение, а свойство background-position определяет его положение. Вычисляется в space space . |
| round | Изображение повторяется так часто, чтобы заполнить область фона, масштабируясь и не обрезаясь. Вычисляется в round round . |
| no-repeat | Изображение размещается один раз и не повторяется. Вычисляется в no-repeat no-repeat . |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Рис. 2. Свойство background-repeat
4. Фиксация изображения: свойство background-attachment
Свойство background-attachment указывает, является ли фоновое изображение фиксированными относительно области просмотра или прокручивается вместе с элементом или его содержимым.
Свойство не наследуется.
| background-attachment | |
|---|---|
| Значения: | |
| scroll | Фоновое изображение прокручивается вместе с текстом и другим содержимым. Значение по умолчанию. |
| fixed | Предотвращает перемещение, фиксирует фоновое изображение на заднем плане. |
| local | Фоновое изображение прокручивается вместе с содержимым элемента. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
5. Позиционирование изображений: свойство background-position
Если для элемента заданы фоновые изображения, свойство background-position указывает их начальное положение (после любого изменения размера) в соответствующей области расположения фона.
Свойство не наследуется.
| background-position | |
|---|---|
| Значения: | |
| % | Горизонтальное смещение вычисляется по формуле ширина области расположения фона — ширина фонового изображения. Вертикальное смещение по формуле высота области расположения фона - высота фонового изображения , где размер изображения — это размер, заданный свойством background-size . Значение по умолчанию 0% 0% . |
| длина | Значение длины дает фиксированную длину в качестве смещения. |
| left | Вычисляет до 0% для горизонтальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно левого края. |
| center | Вычисляет в left 50% для горизонтального положения, если не указано иное горизонтальное положение, или как top 50% для вертикального положения, если оно задано. |
| right | Вычисляет в 100% для горизонтального положения, если задано одно или два значения, в противном случае смещение происходит относительно правого края. |
| top | Вычисляет в 0% для вертикальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно верхнего края. |
| bottom | Вычисляет в 100% для вертикальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно нижнего края. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Если указано только одно значение, второе значение считается center . Если заданы два значения в единицах длины или % , то первое значения представляет горизонтальную позицию, второе — вертикальную. Значения в единицах длины или % представляют смещение верхнего левого угла фонового изображения от верхнего левого угла области расположения фона.
Пара ключевых слов может быть переупорядочена, в то время как комбинация ключевого слова и длины или процента не может. Например, center left — допустимое значение, а 50% left — нет.
Если заданы три или четыре значения в единицах длины или % , то перед каждым значением должно стоять ключевое слово, которое указывает, от какого края дается смещение. Если даны три значения, недостающее смещение считается равным нулю.
Положительные значения смещают внутрь от края области расположения фона. Отрицательные значения смещают наружу от края области расположения фона.
Рис. 3. Свойство background-position
Можно задать фоновую картинку так, чтобы она располагалась только по низу блока:
Рис. 4. Фоновое изображение по низу блока
Также благодаря свойству позиционирования, для одного блока можно использовать несколько фоновых изображений:
Рис. 5. Задание для блока нескольких фоновых изображений
6. Область рисования: свойство background-clip
Свойство background-clip определяет область рисования фона. Фон всегда рисуется под рамкой элемента, если таковая имеется.
Корневой элемент имеет другую область рисования фона, поэтому свойство background-clip на него не влияет.
Свойство не наследуется.
| background-clip | |
|---|---|
| Значения: | |
| border-box | Фон закрашивает область в пределах рамки элемента. Значение по умолчанию. |
| padding-box | Фон закрашивает область в пределах внутренних полей элемента. |
| content-box | Фон закрашивает только область содержимого. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Рис. 6. Свойство background-clip
7. Область расположения фона: свойство background-origin
Свойство background-origin указывает область расположения фона для элементов, которые выводятся на экране как единый блок (например, не абзацы текста).
Свойство не наследуется.
| background-origin | |
|---|---|
| Значения: | |
| padding-box | Фон позиционируется относительно верхних границ области внутренних полей элемента. Значение по умолчанию. |
| border-box | Фон позиционируется относительно верхних границ рамки элемента. |
| content-box | Фон позиционируется относительно верхних границ области содержимого элемента. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Если для элемента установлено background-attachment: fixed , свойство не будет иметь эффекта.
Если для элемента заданы background-clip: padding-box , background-origin: border-box , background-position: top left , и элемент имеет ненулевую рамку, тогда верхняя и левая части фонового изображения будет обрезаны.
Рис. 7. Свойство background-origin
8. Размер изображений: свойство background-size
Свойство background-size устанавливает размер фоновых изображений.
Свойство не наследуется.
| background-size | |
|---|---|
| Значения: | |
| auto | Значение по умолчанию. Высота и ширина изображения равны его оригинальным размерам. |
| длина | Размер задается парой значений, первое значение устанавливает ширину изображения, второе — высоту. Для того, чтобы фон масштабировался вместе с текстом, размеры изображения нужно задавать в em . |
| % | Задает размер фонового изображения в процентах от ширины или высоты элемента, которое заполняется фоном. |
| cover | Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока. |
| contain | Масштабирует изображение с сохранением пропорций таким образом, чтобы оно целиком поместилось внутри блока. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Рис. 8. Свойство background-size
9. Краткая запись свойств фона: свойство background
Свойство background позволяет описать в одном объявлении следующие свойства фона: background-color , background-image , background-position , background-size , background-repeat , background-origin , background-clip и background-attachment . Необязательно указывать все перечисленные свойства, если какое-либо свойство будет пропущено, оно примет значение по-умолчанию.
Если вы указываете в краткой записи фона свойство background-size , то его значения нужно будет записать через слеш / , чтобы отделить его от свойства background-position .
10. Множественные фоны
Фон блока элемента может иметь несколько слоев в CSS3. Количество слоев определяется количеством значений, разделенных запятыми, указанных в свойстве background-image . Значение none по-прежнему создает слой.
Первое изображение в списке — это слой, отображаемый ближайший к пользователю, следующий отрисовывается за первым, и так далее. Цвет фона, если он есть, закрашивается под всеми остальными слоями.
Рис. 9. Пример использования нескольких фоновых изображений
opacity – это свойство CSS, которое позволяет настраивать прозрачность элемента. По умолчанию для всех элементов оно имеет значение 1. Приближая это значение к 0, вы можете сделать элемент более прозрачным.
Обычный вариант применения свойства opacity – использование изображения как части фона. Регулировка прозрачности может улучшить читаемость текста или поможет добиться желаемого визуального эффекта. Однако имейте в виду: невозможно менять opacity элемента background-image, не затрагивая при этом его дочерние элементы.
В этом руководстве мы предлагаем два метода обхода этого ограничения для фоновых изображений.
Требования
Чтобы следовать этой статье, вам понадобятся навыки работы с такими вещами:
Метод 1: Изображения и абсолютное позиционирование
Разметка, написанная с применением этого подхода, может выглядеть так:
Соответствующие CSS-стили будут выглядеть так:
устанавливает блок, содержащий абсолютное позиционирование. Для demo-bg установлено значение position: absolute и присвоено свойство opacity . Для demo-content
установлено значение position: relative. Из-за организации разметки он имеет более высокий контекст наложения, чем demo-bg. Также для более точного управления контекстом наложения можно использовать z-index.
У этого подхода есть некоторые ограничения. Во-первых, он предполагает, что ваше изображение достаточно велико, чтобы вместить любой элемент. Возможно, вам потребуется установить ограничения по размеру, чтобы изображение не выглядело обрезанным или не занимало всю высоту элемента. Во-вторых, вам потребуются дополнительные настройки, если вы хотите контролировать положение фона.
Метод 2: Псевдоэлементы CSS
Второй подход основан на псевдоэлементах. Псевдоэлементы :before и :after можно использовать для большинства CSS элементов. Как правило, вы предоставляете значение content и используете его для добавления дополнительного текста в начале или в конце. Однако так вы также можете добавить пустую строку, а затем использовать псевдоэлементы для дизайна.
Вот пример разметки для этого подхода:
А вот – ее сопутствующие стили:
устанавливает блок, содержащий абсолютное позиционирование. Псевдоэлементу :before присвоено position: absolute с небольшой прозрачностью. Он использует background-size: cover, чтобы занять все доступное пространство.
Преимущество этого подхода заключается в поддержке других свойств фона, таких как background-position, background-repeat и background-size. Его недостатком является использование одного из псевдоэлементов, который может конфликтовать с другими эффектами дизайна – например, с clearfix.
Заключение
В этой статье мы рассмотрели два метода обхода ограничения для непрозрачных фоновых изображений.
У блока может быть различный фон, в том числе, прозрачный. В CSS прозрачный фон установлен по умолчанию. То есть, можно видеть то, что находится за блоком, за исключением мест, занятых контентом. Но есть возможность изменить фон блока. Он может иметь любой цвет. Также фоном может быть картинка. В этой теме мы рассмотрим, как это делается.
Цвет фона блока
Свойство background-color устанавливает цвет фона. Значением этого свойства является цвет, указаннный одним из способов, существующих в CSS. Кроме того, оно принимает такие значения:
background-color: transparent - прозрачный фон (по умолчанию)
background-color: inherit - значение принимается от родительского элемента
Значение transparent используется в CSS, когда нужно вернуть прозрачный фон блоку, если ранее он уже был изменён.
Создадим блок, зададим ему размеры и установим цвет фона.
Область заполнения фона
Фон может зополнять разные области блока. Область задаётся с помощью свойства background-clip . Оно принимает следующие значения:
background-clip: border-box - весь блок вместе с рамкой (по умолчанию)
background-clip: padding-box - весь блок без рамки
background-clip: content-box - фон заполняет только область содержимого
При значении border-box заполняются только прозрачные части рамки. Если рамка сплошная и непрозрачная, то за ней фон не отображается.
Добавим на страницу блок, зададим ему рамку и внутренние отступы и установим фон, заполняющий только содержимое блока:
Фон в виде картинки
В CSS есть возможность использовать в качестве фона картинку. Для этого есть свойство background-image . Значением этого свойства является путь к файлу картинки. Он указывается так:
background-image: url("путь к файлу");
Для примера можно использовать это изображение. Нажмите на него правой кнопкой мыши и сохраните с именем image. Разместите файл в той же папке, где находится страница. Иначе путь к файлу нужно указывать не так, как в примере.
Добавим блок с размерами 400 на 250, чуть меньше, чем изображение. И установим фон в виде картинки:
Не забывайте, что так устанавливается именно фон блока. На нём можно разместить контент.
Размер фоновой картинки
Свойство background-size устанавливает размеры фоновой картинки. Оно определяет не размер фона, а именно размер изображения. Размеры фона зависят от размеров блока. А свойство background-size влияет на картину, которая становится фоном. Значение свойства можно указать в единицах измерения CSS или процентах. Сначала пишется ширина и через пробел высота. Если не соблюсти пропорции ширины и высоты, то изображение искажается.
Также у свойства background-size есть такие значения:
background-size: auto - если указано только это значение, то изображение имеет свои реальные размеры. Если один из размеров задан в единицах измерения, то второму размеру можно указать auto , чтобы у картинки были правильные пропорции.
background-size: cover - картинка заполняет весь фон, сохраняя пропорции.
background-size: contain - вся картинка отображается в фоне.
Значения cover и contain есть также у свойства object-fit . В теме про него эти значения рассмотрены более подробно.
Укажем размер фоновой картинке:
Позиционирование изображения
В прошлом примере виден левый верхний угол изображения. При этом картинка оказалась обрезанной справа и снизу из-за того, что блок меньше изображения. Существует возможность расположить изображение по-другому, чтобы были видны другие части. Для этого используется позиционирование. Его устанавливает свойство background-position . Значением свойства являются два слова, перечисленных через пробел.
Первое слово - это горизонтальное позиционирование. Значение может быть left , center или right .
Второе слово - это вертикальное позиционирование. Значение может быть top , center или bottom .
Расположим изображение в созданном блоке справа сверху.
Повторение изображения
Добавим на страницу ещё один блок и установим фон в виде того же изображения. Но теперь размеры блока будут намного больше размеров картинки. Пока мы не будем ничего менять, чтобы посмотреть, как выглядит блок. Вы увидите, что изображение повторяется для полного заполнения блока. Добавим блоку рамку, чтобы видеть его размеры.
Чтобы изменить повторение изображения, используется свойство background-repeat . Оно принимает такие значения:
background-repeat: repeat - повторяется по горизонтали и по вертикали (по умолчанию)
background-repeat: repeat-x - повторяется только по горизонтали
background-repeat: repeat-y - повторяется только по вертикали
background-repeat: no-repeat - не повторяется
background-repeat: inherit - значение принимается от родительского элемента
Изменим фон блока так, чтобы изображение не повторялось.
В такой ситуации тоже можно использовать позиционирование изображения. Значением свойства background-position могут быть не только слова, но и два числа в единицах измерения CSS, указанные через пробел. Это отступы изображения от левого верхнего угла блока.
Попробуйте разные способы повторения изображения.
Прокрутка фона
Есть возможность установить, как будет двигаться фон блока при прокрутке страницы, а также при прокрутке самого блока. Это делается с помощью свойства background-attachment . Оно может принимать такие значения:
background-attachment: scroll - фон не движется относительно блока и движется вместе с блоком при прокрутке страницы (по умолчанию)
background-attachment: fixed - фон зафиксирован относительно левого верхнего угла окна браузера
background-attachment: local - фон движется вместе с содержимым при прокрутке блока
Для примера добавим на страницу ещё один блок с фоном в виде изображения. Разместим его в самом начале страницы, то есть этот блок должен находиться выше других. Добавим в него вложенный блок с большой высотой, чтобы появилась прокрутка. Сделаем так, чтобы фон прокручивался вместе с содержимым блока.
Попробуйте установить другие варианты прокрутки фона. Посмотрите, как будет двигаться фон блока.
Посмотрите на вложенную картинку. Сверстал тексты, форму, но как в css сделать прозрачный фон?
Конечно же, rgba().
Ещё можно почитать про background-blend-mode, однако поддержка этого чуда пока невсеобъемлюща.
Прозрачное:
background-color: transparent;
Полупрозрачное с цветом:
background-color: rgba(90,0,0,0);
Если макет в фотошопе, то выделите фон, посмотрите там цвет, а также прозрачность, которая установлена. Цвет легко определить с помощью отключения прозрачности и пипетки
Далее напишите в css у нужного дива background-color: rgba(цвет из фотошопа, прозрачность из фотошопа)
Например, background-color: rgba(255,255,255, 0.6);
Читайте также: