زمینه
معنی را از طریق 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);
.
کدورت
اضافه شده در نسخه 5.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 از متغیر CSS خود --bs-success
(با مقدار 25, 135, 84
) استفاده می کنیم و یک متغیر 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
)
),