Fundo
Transmita significado background-colore adicione decoração com gradientes.
Cor de fundo
Semelhante às classes de cores de texto contextuais, defina o plano de fundo de um elemento para qualquer classe contextual. Os utilitários de segundo plano não são definidoscolor , portanto, em alguns casos, você desejará usar .text-* utilitários de cores .
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>Gradiente de fundo
Ao adicionar uma .bg-gradientclasse, um gradiente linear é adicionado como imagem de fundo aos fundos. Este gradiente começa com um branco semitransparente que desvanece na parte inferior.
Você precisa de um gradiente em seu CSS personalizado? Basta adicionar background-image: var(--bs-gradient);.
Opacidade
Adicionado na v5.1.0
A partir da v5.1.0, background-coloros utilitários são gerados com Sass usando variáveis CSS. Isso permite alterações de cores em tempo real sem compilação e alterações dinâmicas de transparência alfa.
Como funciona
Considere nosso .bg-successutilitário padrão.
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
Usamos uma versão RGB de nossa variável CSS --bs-success(com o valor de 25, 135, 84) e anexamos uma segunda variável CSS, --bs-bg-opacity, para a transparência alfa (com um valor padrão 1graças a uma variável CSS local). Isso significa que sempre que você usar agora, seu valor .bg-successcalculado será . A variável CSS local dentro de cada classe evita problemas de herança para que instâncias aninhadas dos utilitários não tenham automaticamente uma transparência alfa modificada.colorrgba(25, 135, 84, 1).bg-*
Exemplo
Para alterar essa opacidade, substitua --bs-bg-opacitypor estilos personalizados ou estilos embutidos.
<div class="bg-success p-2 text-white">This is default success background</div>
<div class="bg-success p-2" style="--bs-bg-opacity: .5;">This is 50% opacity success background</div>Ou escolha qualquer um dos .bg-opacityutilitários:
<div class="bg-success p-2 text-white">This is default success background</div>
<div class="bg-success p-2 text-white bg-opacity-75">This is 75% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-50">This is 50% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-25">This is 25% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-10">This is 10% opacity success background</div>Sass
Além da funcionalidade Sass a seguir, considere ler sobre nossas propriedades personalizadas CSS incluídas (também conhecidas como variáveis CSS) para cores e muito mais.
Variáveis
A maioria dos background-colorutilitários é gerada por nossas cores de tema, reatribuídas de nossas variáveis genéricas de paleta de cores.
$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));
As cores em tons de cinza também estão disponíveis, mas apenas um subconjunto é usado para gerar quaisquer utilitários.
$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;
Mapa
As cores do tema são então colocadas em um mapa Sass para que possamos fazer um loop sobre elas para gerar nossos utilitários, modificadores de componentes e muito mais.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
As cores em tons de cinza também estão disponíveis como um mapa Sass. Este mapa não é usado para gerar nenhum utilitário.
$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
);
As cores RGB são geradas a partir de um mapa Sass separado:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
E as opacidades de cores de fundo se baseiam nisso com seu próprio mapa que é consumido pela API de utilitários:
$utilities-bg: map-merge(
$utilities-colors,
(
"black": to-rgb($black),
"white": to-rgb($white),
"body": to-rgb($body-bg)
)
);
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg");
Mixins
Nenhum mixins é usado para gerar nossos utilitários de segundo plano , mas temos alguns mixins adicionais para outras situações em que você gostaria de criar seus próprios gradientes.
@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 de utilitários
Os utilitários em segundo plano são declarados em nossa API de utilitários em scss/_utilities.scss. Saiba como usar a API de utilitários.
"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
)
),