Hintergrund
Vermitteln Sie Bedeutung background-colorund fügen Sie Dekorationen mit Farbverläufen hinzu.
Hintergrundfarbe
Legen Sie ähnlich wie bei den kontextbezogenen Textfarbklassen den Hintergrund eines Elements auf eine beliebige kontextbezogene Klasse fest. Hintergrunddienstprogramme werden nicht festgelegtcolor , daher werden Sie in einigen Fällen Farbdienstprogramme verwenden .text-* wollen .
<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>Hintergrundverlauf
Durch das Hinzufügen einer .bg-gradientKlasse wird den Hintergründen ein linearer Farbverlauf als Hintergrundbild hinzugefügt. Dieser Verlauf beginnt mit einem halbtransparenten Weiß, das nach unten hin ausgeblendet wird.
Benötigen Sie einen Farbverlauf in Ihrem benutzerdefinierten CSS? Einfach hinzufügen background-image: var(--bs-gradient);.
Opazität
Hinzugefügt in v5.1.0
Ab v5.1.0 werden background-colorDienstprogramme mit Sass unter Verwendung von CSS-Variablen generiert. Dies ermöglicht Echtzeit-Farbänderungen ohne Kompilierung und dynamische Alpha-Transparenzänderungen.
Wie es funktioniert
Betrachten Sie unser Standarddienstprogramm .bg-success.
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
Wir verwenden eine RGB-Version unserer --bs-success(mit dem Wert von 25, 135, 84) CSS-Variablen und hängen eine zweite CSS-Variable, --bs-bg-opacity, für die Alpha-Transparenz an (mit einem Standardwert 1dank einer lokalen CSS-Variablen). Das bedeutet , dass .bg-successIhr berechneter colorWert immer dann ist , wenn Sie now verwenden rgba(25, 135, 84, 1). Die lokale CSS-Variable in jeder .bg-*Klasse vermeidet Vererbungsprobleme, sodass verschachtelte Instanzen der Dienstprogramme nicht automatisch eine modifizierte Alpha-Transparenz haben.
Beispiel
Um diese Deckkraft zu ändern, überschreiben --bs-bg-opacitySie sie mit benutzerdefinierten Stilen oder Inline-Stilen.
<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>Oder wählen Sie eines der .bg-opacityDienstprogramme aus:
<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
Zusätzlich zu den folgenden Sass-Funktionen sollten Sie sich über unsere enthaltenen benutzerdefinierten CSS-Eigenschaften (auch bekannt als CSS-Variablen) für Farben und mehr informieren.
Variablen
Die meisten background-colorDienstprogramme werden von unseren Themenfarben generiert, die von unseren generischen Farbpalettenvariablen neu zugewiesen werden.
$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));
Graustufenfarben sind ebenfalls verfügbar, aber nur eine Teilmenge wird zum Generieren von Hilfsprogrammen verwendet.
$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;
Karte
Themenfarben werden dann in eine Sass-Karte eingefügt, damit wir sie durchlaufen können, um unsere Dienstprogramme, Komponentenmodifikatoren und mehr zu generieren.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Graustufenfarben sind auch als Sass-Map verfügbar. Diese Zuordnung wird nicht zum Generieren von Versorgungsunternehmen verwendet.
$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
);
RGB-Farben werden aus einer separaten Sass-Karte generiert:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Und Hintergrundfarben-Opazitäten bauen darauf mit ihrer eigenen Karte auf, die von der Utilities-API verwendet wird:
$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
Es werden keine Mixins verwendet, um unsere Hintergrunddienstprogramme zu generieren , aber wir haben einige zusätzliche Mixins für andere Situationen, in denen Sie Ihre eigenen Farbverläufe erstellen möchten.
@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);
}
Dienstprogramme-API
Hintergrunddienstprogramme werden in unserer Hilfsprogramm-API in deklariert scss/_utilities.scss. Erfahren Sie, wie Sie die Utilities-API verwenden.
"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
)
),