Sfondo
Trasmetti significato background-colore aggiungi decorazioni con sfumature.
Colore di sfondo
Analogamente alle classi di colore del testo contestuale, imposta lo sfondo di un elemento su qualsiasi classe contestuale. Le utilità di sfondo non vengono impostatecolor , quindi in alcuni casi ti consigliamo di utilizzare .text-* le utilità di colore .
<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 di sfondo
Aggiungendo una .bg-gradientclasse, viene aggiunto un gradiente lineare come immagine di sfondo agli sfondi. Questo gradiente inizia con un bianco semitrasparente che sfuma verso il basso.
Hai bisogno di un gradiente nel tuo CSS personalizzato? Basta aggiungere background-image: var(--bs-gradient);.
Opacità
Aggiunto nella v5.1.0
A partire dalla v5.1.0, background-colorle utilità vengono generate con Sass utilizzando variabili CSS. Ciò consente modifiche del colore in tempo reale senza modifiche e modifiche dinamiche della trasparenza alfa.
Come funziona
.bg-successConsidera la nostra utilità predefinita .
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
Usiamo una versione RGB della nostra variabile CSS --bs-success(con il valore di 25, 135, 84) e alleghiamo una seconda variabile CSS, --bs-bg-opacity, per la trasparenza alfa (con un valore predefinito 1grazie ad una variabile CSS locale). Ciò significa che ogni volta che usi .bg-successora, il tuo valore calcolato colorè rgba(25, 135, 84, 1). La variabile CSS locale all'interno di ogni .bg-*classe evita problemi di ereditarietà, quindi le istanze nidificate delle utilità non hanno automaticamente una trasparenza alfa modificata.
Esempio
Per modificare tale opacità, sovrascrivi --bs-bg-opacitytramite stili personalizzati o stili in linea.
<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>Oppure, scegli tra una delle .bg-opacityutilità:
<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
Oltre alla seguente funzionalità Sass, prendi in considerazione la lettura delle nostre proprietà personalizzate CSS incluse (ovvero variabili CSS) per i colori e altro ancora.
Variabili
La maggior parte delle background-colorutilità sono generate dai nostri colori del tema, riassegnati dalle nostre variabili generiche della tavolozza dei colori.
$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));
Sono disponibili anche colori in scala di grigi, ma solo un sottoinsieme viene utilizzato per generare eventuali utilità.
$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;
Carta geografica
I colori del tema vengono quindi inseriti in una mappa Sass in modo da poterli scorrere per generare le nostre utilità, modificatori di componenti e altro ancora.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
I colori in scala di grigi sono disponibili anche come mappa Sass. Questa mappa non viene utilizzata per generare alcuna utilità.
$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
);
I colori RGB sono generati da una mappa Sass separata:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
E le opacità del colore di sfondo si basano su quella con la propria mappa che viene utilizzata dall'API delle utility:
$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");
Miscele
Nessun mixin viene utilizzato per generare le nostre utilità in background , ma abbiamo alcuni mixin aggiuntivi per altre situazioni in cui desideri creare i tuoi gradienti.
@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 di utilità
Le utilità in background sono dichiarate nella nostra API delle utilità in scss/_utilities.scss. Scopri come utilizzare l'API delle utilità.
"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
)
),