Как сделать фон контента полу-прозрачным, чтобы было видно основной фон сайта? — Вопросы по CSS
Сегодня важный день для проекта Joomla! Мы отмечаем два года напряженной работы наших добровольцев, решивших выпускать новую основную версию каждые два года. После большого количества обсуждений, спринтов по написанию кода и устранения ошибок этот день наконец настал и мы с гордостью объявляем о выпуске новой мажорной ( major ) версии Joomla 5.0, наряду с Joomla 4.4.
В Joomla Extensions Directory появился тег совместимости с Joomla 5.
Joomla-разработчики, проверившие совместимость своих расширений с Joomla 5 могут поставить галочку ��
JoomlaDay Spain, Madrid.
В Мадриде, Испания 5-6 октября 2023 года проходит Joomla Day — конференция, посвящённая как новичкам, так и профессионалам, работающим с Joomla.
Прозрачный текст на CSS
Свойство mix-blend-mode определяет режим смешивания цветов выбранного элемента с нижними слоями.
Его значение multiply — это результат умножения верхнего и нижнего цветов. Черный слой остается черным, а белый не приводит к изменению. Благодаря этому можно сделать прозрачный цвет текста с темным фоном.
Как сделать бэкграунд прозрачным в css
Передайте смысл с помощью background-color и добавьте украшения с помощью градиентов.
На этой странице
Фоновый цвет
Как и в цветовых классах контекстуального текста, задавайте фон любому контекстуальному классу. Компоненты ссылки будут затемняться по наведению, как и классы текста. В утилитах фона не задается атрибут color , так что в некоторых случаях вам понадобится утилиты .text-* .
.bg-secondary
.bg-transparent
div class="p-3 mb-2 bg-primary text-white">.bg-primarydiv> div class="p-3 mb-2 bg-secondary text-white">.bg-secondarydiv> div class="p-3 mb-2 bg-success text-white">.bg-successdiv> div class="p-3 mb-2 bg-danger text-white">.bg-dangerdiv> div class="p-3 mb-2 bg-warning text-dark">.bg-warningdiv> div class="p-3 mb-2 bg-info text-dark">.bg-infodiv> div class="p-3 mb-2 bg-light text-dark">.bg-lightdiv> div class="p-3 mb-2 bg-dark text-white">.bg-darkdiv> div class="p-3 mb-2 bg-body text-dark">.bg-bodydiv> div class="p-3 mb-2 bg-white text-dark">.bg-whitediv> div class="p-3 mb-2 bg-transparent text-dark">.bg-transparentdiv>Фоновый градиент
При добавлении класса .bg-gradient к фону добавляется линейный градиент в качестве фонового изображения. Этот градиент начинается с полупрозрачного белого цвета, который постепенно исчезает к низу.
Вам нужен градиент в вашем собственном CSS? Просто добавьте background-image: var(—bs-gradient); .
.bg-primary.bg-gradient
.bg-secondary.bg-gradient
.bg-success.bg-gradient
.bg-danger.bg-gradient
.bg-warning.bg-gradient
.bg-info.bg-gradient
.bg-light.bg-gradient
.bg-dark.bg-gradient
Непрозрачность
Начиная с версии 5.1.1, утилиты background-color генерируются с помощью Sass с использованием переменных CSS. Это позволяет изменять цвет в реальном времени без компиляции и динамических изменений альфа-прозрачности.
Как это устроено
Рассмотрим нашу стандартную утилиту .bg-success .
.bg-success --bs-bg-opacity: 1; background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important; > Мы используем RGB-версию нашей переменной CSS —bs-success (со значением 25, 135, 84 ) и добавляем вторую переменную CSS, —bs-bg-opacity , для альфа-прозрачности. (со значением по умолчанию 1 благодаря локальной переменной CSS). Это означает, что каждый раз, когда вы сейчас используете .bg-success , вашим вычисленным значением color будет rgba(25, 135, 84, 1) . Локальная переменная CSS внутри каждого класса .bg-* позволяет избежать проблем с наследованием, поэтому вложенные экземпляры утилит не имеют автоматически измененной альфа-прозрачности.
Пример
Чтобы изменить эту непрозрачность, переопределите —bs-bg-opacity с помощью пользовательских стилей или встроенных стилей.
Это фон успеха по умолчанию
Это успешный фон с непрозрачностью 50%
div class="bg-success p-2 text-white">Это фон успеха по умолчаниюdiv> div class="bg-success p-2" style="--bs-bg-opacity: .5;">Это успешный фон с непрозрачностью 50%div>Или выберите любую из утилит .bg-opacity :
Это фон успеха по умолчанию
Это успешный фон с непрозрачностью 75%
Это успешный фон с непрозрачностью 50%
Это успешный фон с непрозрачностью 25%
Это успешный фон с непрозрачностью 10%
div class="bg-success p-2 text-white">Это фон успеха по умолчаниюdiv> div class="bg-success p-2 text-white bg-opacity-75">Это успешный фон с непрозрачностью 75%div> div class="bg-success p-2 text-dark bg-opacity-50">Это успешный фон с непрозрачностью 50%div> div class="bg-success p-2 text-dark bg-opacity-25">Это успешный фон с непрозрачностью 25%div> div class="bg-success p-2 text-dark bg-opacity-10">Это успешный фон с непрозрачностью 10%div>Sass
В дополнение к следующей функциональности Sass, рассмотрите возможность чтения о наших включенных настраиваемых свойствах CSS (также известных как переменные CSS) для цветов и многого другого.
Переменные
Большинство утилит background-color генерируются цветами нашей темы, переназначенными из переменных нашей общей цветовой палитры.
$blue: #0d6efd; $indigo: #6610f2; $purple: #6f42c1; $pink: #d63384; $red: #dc3545; $orange: #fd7e14; $yellow: #ffc107; $green: #198754; $teal: #20c997; $cyan: #0dcaf0; $primary: $blue; $secondary: $gray-600; $success: $green; $info: $cyan; $warning: $yellow; $danger: $red; $light: $gray-100; $dark: $gray-900; $gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)); Также доступны оттенки серого, но для создания каких-либо утилит используется только подмножество.
$white: #fff; $gray-100: #f8f9fa; $gray-200: #e9ecef; $gray-300: #dee2e6; $gray-400: #ced4da; $gray-500: #adb5bd; $gray-600: #6c757d; $gray-700: #495057; $gray-800: #343a40; $gray-900: #212529; $black: #000; Карта
Затем цвета темы помещаются в карту Sass, чтобы мы могли перебирать их, чтобы сгенерировать наши утилиты, модификаторы компонентов и многое другое.
$theme-colors: ( "primary": $primary, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark ); Цвета в градациях серого также доступны в виде карты Sass. Эта карта не используется для создания каких-либо утилит.
$grays: ( "100": $gray-100, "200": $gray-200, "300": $gray-300, "400": $gray-400, "500": $gray-500, "600": $gray-600, "700": $gray-700, "800": $gray-800, "900": $gray-900 ); Миксины
Никакие миксины не используются для создания наших фоновых утилит, но у нас есть некоторые дополнительные миксины для других ситуаций, когда Вы хотите создать свои собственные градиенты.
@mixin gradient-bg($color: null) background-color: $color; @if $enable-gradients background-image: var(--#$variable-prefix>gradient); > > // Horizontal gradient, from left to right // // Creates two color stops, start and end, by specifying a color and position for each color stop. @mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); > // Vertical gradient, from top to bottom // // Creates two color stops, start and end, by specifying a color and position for each color stop. @mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); > @mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) background-image: linear-gradient($deg, $start-color, $end-color); > @mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color); > @mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color); > @mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) background-image: radial-gradient(circle, $inner-color, $outer-color); > @mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); > Утилиты API
Фоновые утилиты объявлены в нашем API утилит в scss/_utilities.scss . Узнайте, как использовать утилиты API.
"background-color": ( property: background-color, class: bg, local-vars: ( "bg-opacity": 1 ), values: map-merge( $utilities-bg-colors, ( "transparent": transparent ) ) ), "bg-opacity": ( css-var: true, class: bg-opacity, values: ( 10: .1, 25: .25, 50: .5, 75: .75, 100: 1 ) ),
background-color
CSS-свойство background-color CSS устанавливает цвет фона элемента.
Интерактивный пример
Синтаксис
/* Словесные значения */ background-color: red; /* Шестнадцатеричное значение */ background-color: #bbff00; /* Шестнадцатеричное значение с alpha-каналом */ background-color: #11ffee00; /* 00 - полностью прозрачный */ background-color: #11ffeeff; /* ff - непрозрачный */ /* RGB-значение */ background-color: rgb(255, 255, 128); /* RGBA-значение или RGB с alpha-каналом */ background-color: rgba(117, 190, 218, 0); /* 0.0 - полностью прозрачный */ background-color: rgba(117, 190, 218, 0.5); /* 0.5 - полупрозрачный */ background-color: rgba(117, 190, 218, 1); /* 1.0 - непрозрачный */ /* HSLA-значение */ background-color: hsla(50, 33%, 25%, 0.75); /* Специальные словесные значения */ background-color: currentColor; background-color: transparent; /* Общие значения */ background-color: inherit; background-color: initial; background-color: unset;
Свойство background-color определяется единственным значением .
Значения
Формальный синтаксис
background-color =
Примеры
HTML
div class="exampleone">Lorem ipsum dolor sit amet, consectetuerdiv> div class="exampletwo">Lorem ipsum dolor sit amet, consectetuerdiv> div class="examplethree">Lorem ipsum dolor sit amet, consectetuerdiv>
CSS
.exampleone background-color: teal; color: white; > .exampletwo background-color: rgb(153, 102, 153); color: rgb(255, 255, 204); > .examplethree background-color: #777799; color: #ffffff; >
Результат
Проблемы доступности
Важно обеспечить достаточный цветовой контраст между цветом текста и фоном, чтобы люди со слабым зрением могли его прочитать, но при этом должна быть достаточная разница между введённым текстом и текстом placeholder, чтобы пользователь не путал их.
Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям Web Content Accessibility Guidelines (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 Backgrounds and Borders Module Level 3 # background-color |
| Начальное значение | transparent |
|---|---|
| Применяется к | все элементы. Это также применяется к ::first-letter и ::first-line . |
| Наследуется | нет |
| Обработка значения | вычисленный цвет |
| Animation type | цвет |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Множественные фоны
- Тип данных
- Другие свойства, связанные с цветом: color (en-US), border-color (en-US), outline-color , text-decoration-color (en-US), text-emphasis-color (en-US), text-shadow , caret-color (en-US), и column-rule-color
- Применение цвета к HTML элементам с помощью CSS
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.