Tiểu sử
Truyền tải ý nghĩa thông qua background-colorvà thêm trang trí với gradient.
Màu nền
Tương tự với các lớp màu văn bản theo ngữ cảnh, hãy đặt nền của một phần tử thành bất kỳ lớp nào theo ngữ cảnh. Tiện ích nền không được đặtcolor , vì vậy trong một số trường hợp, bạn sẽ muốn sử dụng .text-* tiện ích màu .
<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>Gradient nền
Bằng cách thêm một .bg-gradientlớp, một gradient tuyến tính được thêm làm hình nền cho hình nền. Gradient này bắt đầu với màu trắng bán trong suốt mờ dần về phía dưới.
Bạn có cần một gradient trong CSS tùy chỉnh của mình không? Chỉ cần thêm background-image: var(--bs-gradient);.
Độ mờ
Đã thêm vào v5.1.0
Kể từ v5.1.0, background-colorcác tiện ích được tạo với Sass bằng cách sử dụng các biến CSS. Điều này cho phép thay đổi màu theo thời gian thực mà không cần biên dịch và thay đổi độ trong suốt alpha động.
Làm thế nào nó hoạt động
.bg-successHãy xem xét tiện ích mặc định của chúng tôi .
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
Chúng tôi sử dụng phiên bản RGB của biến CSS --bs-success(với giá trị là 25, 135, 84) của chúng tôi và đính kèm biến CSS thứ hai --bs-bg-opacity, để có độ trong suốt alpha (với giá trị mặc định 1nhờ biến CSS cục bộ). Điều đó có nghĩa là bất cứ lúc nào bạn sử dụng bây giờ, giá trị được .bg-successtính của bạn là . Biến CSS cục bộ bên trong mỗi lớp tránh các vấn đề về kế thừa, vì vậy các phiên bản lồng nhau của tiện ích không tự động có độ trong suốt alpha được sửa đổi.colorrgba(25, 135, 84, 1).bg-*
Thí dụ
Để thay đổi độ mờ đó, hãy ghi đè --bs-bg-opacityqua các kiểu tùy chỉnh hoặc kiểu nội tuyế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>Hoặc, chọn từ bất kỳ .bg-opacitytiện ích nào:
<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
Ngoài chức năng Sass sau, hãy cân nhắc đọc về các thuộc tính tùy chỉnh CSS được bao gồm của chúng tôi (còn gọi là biến CSS) cho màu sắc và hơn thế nữa.
Biến
Hầu hết các background-colortiện ích được tạo ra bởi màu chủ đề của chúng tôi, được chỉ định lại từ các biến bảng màu chung của chúng tôi.
$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));
Màu thang độ xám cũng có sẵn, nhưng chỉ một tập hợp con được sử dụng để tạo ra bất kỳ tiện ích nào.
$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;
Bản đồ
Các màu chủ đề sau đó được đưa vào bản đồ Sass để chúng tôi có thể lặp lại chúng để tạo ra các tiện ích, công cụ sửa đổi thành phần và hơn thế nữa.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Màu xám cũng có sẵn dưới dạng bản đồ Sass. Bản đồ này không được sử dụng để tạo ra bất kỳ tiện ích nào.
$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
);
Màu RGB được tạo ra từ một bản đồ Sass riêng biệt:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Và độ mờ của màu nền được xây dựng dựa trên đó với bản đồ của riêng chúng được sử dụng bởi API tiện ích:
$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
Không có mixin nào được sử dụng để tạo các tiện ích nền của chúng tôi , nhưng chúng tôi có một số mixin bổ sung cho các trường hợp khác mà bạn muốn tạo gradient của riêng mình.
@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);
}
API tiện ích
Các tiện ích nền được khai báo trong API tiện ích của chúng tôi trong scss/_utilities.scss. Tìm hiểu cách sử dụng API tiện ích.
"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
)
),