Ebyeemabega
Tuusa amakulu okuyita mu background-colorera osseeko okuyooyoota nga olina gradients.
Langi y’emabega
Okufaananako ne kiraasi za langi z’ebiwandiiko eby’omutwe, teeka ennyuma y’ekintu ku kiraasi yonna ey’ensonga. Background utilities teziteekawo ,color kale mu mbeera ezimu ojja kwagala okukozesa .text-* color utilities .
<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>Okukyukakyuka okw’emabega
Nga ogattako .bg-gradientkiraasi, linear gradient eyongerwako nga ekifaananyi eky’emabega ku bifaananyi eby’emabega. Gradienti eno etandika n’enjeru etali ntangaavu (semi-transparent white) egenda wansi.
Oyagala gradient mu CSS yo eya custom? Okwongerako kyokka background-image: var(--bs-gradient);.
Obutategeera bulungi
Yayongerwako mu v5.1.0
Okuva ku v5.1.0, background-colorebikozesebwa bikolebwa ne Sass nga tukozesa enkyukakyuka za CSS. Kino kisobozesa enkyukakyuka za langi mu kiseera ekituufu awatali kukuŋŋaanya n’enkyukakyuka za alpha transparency ezikyukakyuka.
Engeri gye kikola
Lowooza ku .bg-successutility yaffe eya default.
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
Tukozesa enkyusa ya RGB eyaffe --bs-success(n’omuwendo gwa 25, 135, 84) enkyukakyuka ya CSS era ne tugattako enkyukakyuka ya CSS eyokubiri, --bs-bg-opacity, olw’obwerufu bwa alpha (n’omuwendo ogusookerwako 1olw’enkyukakyuka ya CSS ey’omu kitundu). Ekyo kitegeeza nti essaawa yonna gy’okozesa .bg-successkati, omuwendo gwo ogubaliriddwa colorguba rgba(25, 135, 84, 1). Enkyukakyuka ya CSS ey’ekitundu munda mu buli .bg-*kiraasi yeewala ensonga z’obusika kale ebikozesebwa ebiteekeddwa mu kisenge eby’ebikozesebwa tebiba na bwerufu bwa alpha obukyusiddwa mu ngeri ey’otoma.
Eky'okulabirako
Okukyusa opacity eyo, override --bs-bg-opacitynga oyita mu custom styles oba inline styles.
<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>Oba, londa okuva mu kimu ku .bg-opacitybikozesebwa:
<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 nga bwe kiri
Ng’oggyeeko enkola ya Sass eno wammanga, lowooza ku kusoma ku bintu byaffe eby’ennono ebya CSS ebiteekeddwamu (aka CSS variables) ku langi n’ebirala.
Enkyukakyuka ezikyukakyuka
Ebisinga obungi background-colorebikozesebwa bikolebwa langi zaffe ez’omulamwa, eziddamu okuweebwa okuva mu nkyukakyuka zaffe eza langi ez’enjawulo.
$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));
Langi za enzirugavu nazo ziriwo, naye ekitundu ekitono kyokka kye kikozesebwa okukola ebikozesebwa byonna.
$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;
Maapu
Langi z’omulamwa olwo ziteekebwa mu maapu ya Sass tusobole okuzikolako okukola ebikozesebwa byaffe, ebikyusa ebitundu, n’ebirala.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Langi za Grayscale nazo zisangibwa nga maapu ya Sass. Maapu eno tekozesebwa kukola bikozesebwa byonna.
$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
);
Langi za RGB zikolebwa okuva ku maapu ya Sass ey’enjawulo:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Era opacities za langi ez'emabega zizimba ku ekyo ne maapu yaabwe ekozesebwa API y'ebikozesebwa:
$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");
Ebirungo ebitabuddwa
No mixins are used to generate our background utilities , naye tulina mixins endala ez'embeera endala mw'oyagala okukola gradients zo.
@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);
}
Ebikozesebwa API
Ebikozesebwa eby'emabega birangiriddwa mu API yaffe ey'ebikozesebwa mu scss/_utilities.scss. Yiga engeri y'okukozesaamu API y'ebikozesebwa.
"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
)
),