Fondo
Transmite significado background-colore engade decoración con degradados.
Cor de fondo
De xeito similar ás clases de cor do texto contextual, establece o fondo dun elemento en calquera clase contextual. As utilidades de fondo non se definencolor , polo que nalgúns casos quererá usar .text-* as utilidades 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>Degradado de fondo
Ao engadir unha .bg-gradientclase, engádese un degradado lineal como imaxe de fondo aos fondos. Este degradado comeza cun branco semitransparente que se esvae cara ao fondo.
Necesitas un degradado no teu CSS personalizado? Só engade background-image: var(--bs-gradient);.
Opacidade
Engadido na v5.1.0
A partir da versión 5.1.0, background-coloras utilidades xéranse con Sass usando variables CSS. Isto permite cambios de cor en tempo real sen compilación e cambios dinámicos de transparencia alfa.
Cómo funciona
Considere a nosa .bg-successutilidade predeterminada.
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
Usamos unha versión RGB da nosa --bs-success(co valor de 25, 135, 84) variable CSS e adxuntamos unha segunda variable CSS, --bs-bg-opacity, para a transparencia alfa (cun valor predeterminado 1grazas a unha variable CSS local). Isto significa que sempre que uses agora, o teu valor .bg-successcalculado é . A variable CSS local dentro de cada clase evita problemas de herdanza polo que as instancias aniñadas das utilidades non teñen automaticamente unha transparencia alfa modificada.colorrgba(25, 135, 84, 1).bg-*
Exemplo
Para cambiar esa opacidade, anula --bs-bg-opacitymediante estilos personalizados ou estilos en liña.
<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 escolle entre calquera das .bg-opacityutilidades:
<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
Ademais da seguinte funcionalidade de Sass, considera ler sobre as nosas propiedades personalizadas CSS incluídas (tamén coñecidas como variables CSS) para cores e moito máis.
Variables
A maioría das background-colorutilidades son xeradas polas cores dos nosos temas, reasignadas a partir das variables xenéricas da nosa 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));
Tamén están dispoñibles cores en escala de grises, pero só se usa un subconxunto para xerar utilidades.
$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
A continuación, as cores dos temas colócanse nun mapa Sass para que poidamos pasar sobre elas para xerar as nosas utilidades, modificadores de compoñentes e moito máis.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
As cores en escala de grises tamén están dispoñibles como mapa Sass. Este mapa non se usa para xerar ningunha utilidade.
$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 xéranse a partir dun mapa Sass separado:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
E as opacidades da cor de fondo constrúense co seu propio mapa que consume a API de utilidades:
$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
Non se usan mixins para xerar as nosas utilidades en segundo plano , pero si temos algúns mixins adicionais para outras situacións nas que desexas crear os teus propios 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 utilidades
As utilidades en segundo plano decláranse na nosa API de utilidades en scss/_utilities.scss. Aprende a usar a API de utilidades.
"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
)
),