Background
Ihatid ang kahulugan sa pamamagitan ng background-colorat magdagdag ng dekorasyon na may mga gradient.
Kulay ng background
Katulad ng mga klase ng kulay ng teksto sa konteksto, itakda ang background ng isang elemento sa anumang klase sa konteksto. Ang mga utility sa background ay hindi nakatakdacolor , kaya sa ilang mga kaso gugustuhin mong gumamit ng mga .text-* utility na may kulay .
<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>Gradient ng background
Sa pamamagitan ng pagdaragdag ng isang .bg-gradientklase, ang isang linear gradient ay idinagdag bilang larawan sa background sa mga background. Ang gradient na ito ay nagsisimula sa isang semi-transparent na puti na kumukupas hanggang sa ibaba.
Kailangan mo ba ng gradient sa iyong custom na CSS? Idagdag mo lang background-image: var(--bs-gradient);.
Opacity
Idinagdag sa v5.1.0
Sa v5.1.0, background-colorang mga utility ay nabuo gamit ang Sass gamit ang mga variable ng CSS. Nagbibigay-daan ito para sa real-time na mga pagbabago sa kulay nang walang compilation at dynamic na alpha transparency na mga pagbabago.
Paano ito gumagana
Isaalang-alang ang aming default .bg-successna utility.
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
Gumagamit kami ng RGB na bersyon ng aming --bs-success(na may halaga ng 25, 135, 84) CSS variable at nag-attach ng pangalawang CSS variable, --bs-bg-opacity, para sa alpha transparency (na may default na value 1salamat sa lokal na CSS variable). Ibig sabihin, anumang oras na gagamitin mo .bg-successngayon, ang iyong nakalkulang colorhalaga ay rgba(25, 135, 84, 1). Ang lokal na variable ng CSS sa loob ng bawat .bg-*klase ay umiiwas sa mga isyu sa pagmamana kaya ang mga nested instance ng mga utility ay hindi awtomatikong may binagong alpha transparency.
Halimbawa
Upang baguhin ang opacity na iyon, i-override sa --bs-bg-opacitypamamagitan ng mga custom na istilo o inline na istilo.
<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, pumili mula sa alinman sa mga .bg-opacityutility:
<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
Bilang karagdagan sa sumusunod na functionality ng Sass, isaalang-alang ang pagbabasa tungkol sa aming kasamang CSS custom na mga katangian (aka CSS variable) para sa mga kulay at higit pa.
Mga variable
Karamihan background-colorsa mga utility ay nabuo ng aming mga kulay ng tema, na muling itinalaga mula sa aming mga generic na color palette variable.
$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));
Available din ang mga grayscale na kulay, ngunit isang subset lang ang ginagamit upang bumuo ng anumang mga utility.
$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
Pagkatapos ay inilalagay ang mga kulay ng tema sa isang mapa ng Sass upang mabuo namin ang mga ito upang mabuo ang aming mga utility, mga component modifier, at higit pa.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Available din ang mga grayscale na kulay bilang isang mapa ng Sass. Ang mapa na ito ay hindi ginagamit upang bumuo ng anumang mga kagamitan.
$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 kulay ng RGB ay nabuo mula sa isang hiwalay na mapa ng Sass:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
At ang mga opacity ng kulay ng background ay nabuo sa pamamagitan ng sarili nilang mapa na ginagamit ng mga utility 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
Walang mixin ang ginagamit upang bumuo ng aming mga background utility , ngunit mayroon kaming ilang karagdagang mixin para sa iba pang mga sitwasyon kung saan gusto mong gumawa ng sarili mong mga gradient.
@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 utility sa background ay idineklara sa aming mga utility API sa scss/_utilities.scss. Matutunan kung paano gamitin ang utility 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
)
),