Stori
Kɔnvɛy minin tru background-colorɛn ad dɛkɔreshɔn wit grɛdiɛnt.
Bakgrɔn kɔlɔ
Semweso lɛk di kɔntɛkstual tɛks kɔlɔ klas dɛn, sɛt di bakgrɔn fɔ wan ɛlimɛnt to ɛni kɔntɛkstual klas. Bakgrɔn yutiliti dɛn nɔ de sɛtcolor , so insay sɔm kes dɛn yu go want fɔ yuz .text-* yutiliti dɛn we gɛt kɔlɔ .
<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>Bakgrɔn grɛdiɛnt
We dɛn ad wan .bg-gradientklas, dɛn kin ad wan linya grɛdiɛnt as bakgrɔn imej to di bakgrɔn dɛn. dis gradient de stat wit wan sεmi-transparent wayt we de fεd aut to di bכtכm.
Yu nid wan gradient na yu kɔstɔm CSS? Jɔs ad background-image: var(--bs-gradient);.
Opasiti fɔ di tin dɛn we de apin
Dɛn ad am na v5.1.0
As of v5.1.0, background-coloryutiliti dɛn de jenarayz wit Sass yuz CSS vɛriɔbul dɛn. Dis alaw fɔ rial-taym kala chenj dɛn we nɔ gɛt kɔmpilayshɔn ɛn dinamik alfa transparency chenj dɛn.
Aw i de wok
Tink bɔt wi difɔlt .bg-successyutiliti.
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
Wi de yuz wan RGB vɛshɔn fɔ wi --bs-success(wit di valyu fɔ 25, 135, 84) CSS vɛriɔbul ɛn ataya wan sɛkɔn CSS vɛriɔbul, --bs-bg-opacity, fɔ di alfa transparency (wit difɔlt valyu 1tank to wan lokal CSS vɛriɔbul). Dat min se ɛni tɛm we yu yuz .bg-successnaw, yu kɔmpyutayt colorvalyu na rgba(25, 135, 84, 1). Di lokal CSS vɛriɔbul insay ɛni .bg-*klas de avɔyd inhɛritɛns ishu dɛn so nest instans dɛn fɔ di yutiliti dɛn nɔ gɛt ɔtomɛtik wan modifyed alfa transparency.
Ɛgzampul
Fɔ chenj da opasiti de, ɔvalayz --bs-bg-opacityvia kɔstɔm stayl ɔ inlayn stayl dɛn.
<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>Ɔ, pik frɔm ɛni wan pan di .bg-opacityyutiliti dɛn:
<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 we bin de
Apat frɔm di Sass funkshɔnaliti dɛn we de dɔŋ ya, tink bɔt fɔ rid bɔt wi inklud CSS kɔstɔm prɔpati dɛn (aka CSS vɛriɔbul dɛn) fɔ kɔlɔ ɛn mɔ.
Di tin dɛn we kin chenj
Mɔs background-coloryutiliti dɛn de jenarayz bay wi tim kɔlɔ dɛn, we dɛn riasayn frɔm wi jenɛrik kɔlɔ palet vɛriɔbul dɛn.
$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));
Greyskɛl kɔlɔ dɛn de bak, bɔt na wan sɔbsɛt nɔmɔ dɛn de yuz fɔ mek ɛni yutiliti.
$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;
Map fɔ di map
Dɔn dɛn kin put tim kɔlɔ dɛn na wan Sass map so dat wi go ebul fɔ lɔp oba dɛn fɔ mek wi yutiliti dɛn, kɔmpɔnɛnt modifya dɛn, ɛn ɔda tin dɛn.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Greyscale kala dɛn de bak as Sass map. Dɛn nɔ de yuz dis map fɔ mek ɛni yutiliti.
$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 kala dɛn de jenarayz frɔm wan sɛpret Sass map:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Ɛn bakgrɔn kala opasiti dɛn bil pan dat wit dɛn yon map we di yutiliti dɛn API dɔn it:
$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");
Mixin dɛn
No mixins are used to generate our background utilities , bɔt wi gɛt sɔm ɔda mixins fɔ ɔda situeshɔn dɛn usay yu go lɛk fɔ mek yu yon gradient dɛn.
@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);
}
Yutiliti dɛn API
Bakgrɔn yutiliti dɛn de diklar insay wi yutiliti dɛn API insay scss/_utilities.scss. Lan aw fɔ yuz di yutiliti dɛn 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
)
),