Позадина
Пренесете го значењето преку background-colorи додајте декорација со градиенти.
Боја на позадина
Слично на класите на бои на контекстуален текст, поставете ја позадината на елементот на која било контекстуална класа. Услужните програми за заднина не се поставуваатcolor , така што во некои случаи ќе сакате да користите .text-* алатки за боја .
<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>Градиент на позадина
Со додавање на .bg-gradientкласа, се додава линеарен градиент како слика за позадина на позадините. Овој градиент започнува со полупроѕирна бела боја која избледува до дното.
Дали ви треба градиент во вашиот сопствен CSS? Само додадете background-image: var(--bs-gradient);.
Непроѕирност
Додадено во v5.1.0
Почнувајќи од верзијата 5.1.0, background-colorкомуналните услуги се генерираат со Sass користејќи CSS променливи. Ова овозможува промена на бојата во реално време без компилација и динамични промени на алфа-проѕирноста.
Како работи
Размислете за нашата стандардна .bg-successалатка.
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
Ние користиме RGB верзија на нашата --bs-success(со вредност на 25, 135, 84) CSS променлива и прикачивме втора CSS променлива, --bs-bg-opacity, за алфа транспарентност (со стандардна вредност 1благодарение на локалната CSS променлива). Тоа значи дека кога и да користите .bg-successсега, вашата пресметана colorвредност е rgba(25, 135, 84, 1). Локалната променлива CSS во секоја .bg-*класа ги избегнува проблемите со наследувањето, така што вгнездените примероци на услужните програми нема автоматски да имаат изменета алфа транспарентност.
Пример
За да ја промените таа непроѕирност, префрлете се --bs-bg-opacityпреку сопствени стилови или вградени стилови.
<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>Или, изберете од која било од .bg-opacityкомуналните услуги:
<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 функционалност, размислете за читање за нашите вклучени сопствени CSS својства (наречени CSS променливи) за бои и повеќе.
Променливи
Повеќето background-colorуслужни програми се генерирани од нашите бои на тема, преназначени од нашите генерички променливи на палета на бои.
$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));
Достапни се и бои на сиви тонови, но само подмножество се користи за генерирање на какви било комунални услуги.
$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;
Карта
Боите на темите потоа се ставаат во мапата Sass за да можеме да ги превртиме за да ги генерираме нашите алатки, модификатори на компоненти и друго.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Боите со сиви тонови се исто така достапни како мапа на Sass. Оваа карта не се користи за генерирање на никакви комунални услуги.
$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 боите се генерираат од посебна мапа на Sass:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
И непроѕирноста на бојата на заднината се надоврзува на тоа со нивната сопствена мапа што ја троши 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");
Мешавини
Не се користат мешавини за генерирање на нашите алатки за заднина , но имаме некои дополнителни мешавини за други ситуации каде што би сакале да креирате сопствени градиенти.
@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
Услугите во заднина се декларирани во нашите API за комунални услуги во scss/_utilities.scss. Научете како да ги користите 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
)
),