Latar belakang
Sampaikan makna melalui background-colordan tambah hiasan dengan kecerunan.
Warna latar belakang
Sama seperti kelas warna teks kontekstual, tetapkan latar belakang elemen kepada mana-mana kelas kontekstual. Utiliti latar belakang tidak ditetapkancolor , jadi dalam beberapa kes anda perlu menggunakan .text-* utiliti warna .
<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>Kecerunan latar belakang
Dengan menambahkan .bg-gradientkelas, kecerunan linear ditambah sebagai imej latar belakang pada latar belakang. Kecerunan ini bermula dengan putih separa lutsinar yang pudar ke bahagian bawah.
Adakah anda memerlukan kecerunan dalam CSS tersuai anda? Hanya tambah background-image: var(--bs-gradient);.
Kelegapan
Ditambah dalam v5.1.0Mulai v5.1.0, background-colorutiliti dijana dengan Sass menggunakan pembolehubah CSS. Ini membolehkan perubahan warna masa nyata tanpa kompilasi dan perubahan ketelusan alfa dinamik.
Bagaimana ia berfungsi
Pertimbangkan .bg-successutiliti lalai kami.
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
Kami menggunakan versi RGB kami --bs-success(dengan nilai 25, 135, 84) pembolehubah CSS dan melampirkan pembolehubah CSS kedua, --bs-bg-opacity, untuk ketelusan alfa (dengan nilai lalai 1terima kasih kepada pembolehubah CSS tempatan). Ini bermakna pada bila-bila masa anda menggunakan sekarang, nilai .bg-successpengiraan anda ialah . Pembolehubah CSS tempatan di dalam setiap kelas mengelakkan isu pewarisan jadi contoh bersarang bagi utiliti tidak mempunyai ketelusan alfa yang diubah suai secara automatik.colorrgba(25, 135, 84, 1).bg-*
Contoh
Untuk menukar kelegapan itu, ganti --bs-bg-opacitymelalui gaya tersuai atau gaya sebaris.
<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>Atau, pilih daripada mana-mana .bg-opacityutiliti:
<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
Selain fungsi Sass berikut, pertimbangkan untuk membaca tentang sifat tersuai CSS kami yang disertakan (aka pembolehubah CSS) untuk warna dan banyak lagi.
Pembolehubah
Kebanyakan background-colorutiliti dijana oleh warna tema kami, ditetapkan semula daripada pembolehubah palet warna generik kami.
$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));
Warna skala kelabu juga tersedia, tetapi hanya subset digunakan untuk menjana sebarang utiliti.
$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;
Peta
Warna tema kemudiannya dimasukkan ke dalam peta Sass supaya kami boleh melingkarkannya untuk menjana utiliti kami, pengubah suai komponen dan banyak lagi.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Warna skala kelabu juga tersedia sebagai peta Sass. Peta ini tidak digunakan untuk menjana sebarang utiliti.
$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
);
Warna RGB dijana daripada peta Sass yang berasingan:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Dan kelegapan warna latar belakang dibina di atasnya dengan peta mereka sendiri yang digunakan oleh API utiliti:
$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");
Campuran
Tiada campuran digunakan untuk menjana utiliti latar belakang kami , tetapi kami mempunyai beberapa campuran tambahan untuk situasi lain yang anda ingin mencipta kecerunan anda sendiri.
@mixin gradient-bg($color: null) {
background-color: $color;
@if $enable-gradients {
background-image: var(--#{$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);
}
API Utiliti
Utiliti latar belakang diisytiharkan dalam API utiliti kami dalam scss/_utilities.scss. Ketahui cara menggunakan API utiliti.
"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
)
),