Background
Ipahayag ang kahulogan pinaagi background-colorug idugang ang dekorasyon nga adunay mga gradient.
Kolor sa background
Susama sa mga klase sa kolor sa teksto sa konteksto, itakda ang background sa usa ka elemento sa bisan unsang klase sa konteksto. Ang mga gamit sa background wala itakdacolor , mao nga sa pipila ka mga kaso gusto nimo nga mogamit mga gamit sa .text-* kolor .
<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>Background gradient
Pinaagi sa pagdugang sa usa ka .bg-gradientklase, usa ka linear gradient ang idugang ingon background nga imahe sa mga background. Kini nga gradient nagsugod sa usa ka semi-transparent nga puti nga mawala sa ilawom.
Nagkinahanglan ka ba og gradient sa imong custom CSS? Idugang lang background-image: var(--bs-gradient);.
Opacity
Gidugang sa v5.1.0
Sa v5.1.0, background-colorang mga utilities gihimo uban sa Sass gamit ang CSS variables. Gitugotan niini ang mga pagbag-o sa kolor sa tinuud nga oras nga wala’y pag-compile ug dinamikong pagbag-o sa transparency sa alpha.
Giunsa kini paglihok
Hunahunaa ang among default .bg-successutility.
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
Gigamit namo ang RGB nga bersyon sa among --bs-success(uban ang bili sa 25, 135, 84) CSS variable ug gilakip ang ikaduha nga CSS variable, --bs-bg-opacity, alang sa alpha transparency (nga adunay default nga bili 1salamat sa lokal nga CSS variable). Kana nagpasabut nga bisan unsang orasa nga imong gamiton .bg-successkaron, ang imong gikalkula nga colorkantidad mao ang rgba(25, 135, 84, 1). Ang lokal nga CSS variable sa sulod sa matag .bg-*klase naglikay sa mga isyu sa kabilin mao nga ang mga nested instance sa mga utilities dili awtomatik nga adunay giusab nga alpha transparency.
Pananglitan
Aron mausab kana nga opacity, i-override --bs-bg-opacitypinaagi sa custom nga mga estilo o inline nga mga estilo.
<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>O, pagpili gikan sa bisan unsang mga .bg-opacityutilities:
<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
Dugang pa sa mosunod nga Sass functionality, ikonsiderar ang pagbasa bahin sa among gilakip nga CSS custom properties (aka CSS variables) para sa mga kolor ug uban pa.
Mga variable
Kadaghanan sa background-colormga utilities namugna pinaagi sa among mga kolor sa tema, gi-reassign gikan sa among generic color palette variables.
$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));
Anaa usab ang mga grayscale nga kolor, apan usa ra ka subset ang gigamit aron makamugna og bisan unsang mga gamit.
$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
Ang mga kolor sa tema gibutang dayon sa usa ka mapa sa Sass aron ma-loop namo kini aron makamugna ang among mga utilities, component modifiers, ug uban pa.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Ang mga grayscale nga kolor magamit usab isip usa ka mapa sa Sass. Kini nga mapa wala gigamit sa pagmugna og bisan unsang mga utilities.
$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
);
Ang mga kolor sa RGB namugna gikan sa lahi nga mapa sa Sass:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Ug ang mga opacity sa kolor sa background nagtukod sa ilang kaugalingon nga mapa nga gigamit sa mga utilities API:
$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
Walay mixins nga gigamit sa pagmugna sa among background utilities , apan aduna kami mga dugang nga mixin para sa ubang mga sitwasyon diin gusto nimo nga maghimo sa imong kaugalingon nga mga gradients.
@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);
}
Utilities API
Ang mga gamit sa background gideklarar sa among mga utilities API sa scss/_utilities.scss. Pagkat-on unsaon paggamit ang mga utilities API.
"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
)
),