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);.
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
);
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,
values: map-merge(
$theme-colors,
(
"body": $body-bg,
"white": $white,
"transparent": transparent
)
)
),