Truyền đạt ý nghĩa thông qua
.bg-opacity-0
.bg-opacity-5
.bg-opacity-10
.bg-opacity-20
.bg-opacity-30
.bg-opacity-40
.bg-opacity-50
.bg-opacity-60
.bg-opacity-70
.bg-opacity-80
.bg-opacity-90
3 với một số lớp tiện ích màu sắc. Bao gồm hỗ trợ làm sáng, làm tối và độ mờ cùng với màu nền động trên các trình kích hoạt khác nhauTổng quan
Thêm màu nền dựa trên nội dung của nó bằng cách sử dụng hoặc chọn từ. Thay đổi độ sáng hoặc tối của màu bằng cách sử dụng các lớp hoặc đặt màu nền bằng cách thay đổi kênh alpha của nó
Tương tự như các lớp màu văn bản theo ngữ cảnh, hãy đặt nền của phần tử thành bất kỳ lớp theo ngữ cảnh nào. Các tiện ích nền không đặt
.bg-opacity-0
.bg-opacity-5
.bg-opacity-10
.bg-opacity-20
.bg-opacity-30
.bg-opacity-40
.bg-opacity-50
.bg-opacity-60
.bg-opacity-70
.bg-opacity-80
.bg-opacity-90
4, vì vậy trong một số trường hợp, bạn sẽ muốn sử dụng các tiện ích màu .bg-opacity-0
.bg-opacity-5
.bg-opacity-10
.bg-opacity-20
.bg-opacity-30
.bg-opacity-40
.bg-opacity-50
.bg-opacity-60
.bg-opacity-70
.bg-opacity-80
.bg-opacity-90
5.bg-primary
.bg-secondary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-light
.bg-dark
.bg-gray
.bg-body
.bg-white
.bg-transparent
Bảng màu nền mở rộng
Bảng màu mở rộng được bật theo mặc định. Bạn có thể vô hiệu hóa nó bằng cách đặt biến
.bg-opacity-0
.bg-opacity-5
.bg-opacity-10
.bg-opacity-20
.bg-opacity-30
.bg-opacity-40
.bg-opacity-50
.bg-opacity-60
.bg-opacity-70
.bg-opacity-80
.bg-opacity-90
6 thành .bg-opacity-0
.bg-opacity-5
.bg-opacity-10
.bg-opacity-20
.bg-opacity-30
.bg-opacity-40
.bg-opacity-50
.bg-opacity-60
.bg-opacity-70
.bg-opacity-80
.bg-opacity-90
7. Đây là cách bảng màu nền hoàn chỉnh trông như thế nào.bg-blue
.bg-indigo
.bg-navy
.bg-maroon
.bg-brown
.bg-purple
.bg-pink
.bg-magenta
.bg-red
.bg-orange
.bg-yellow
.bg-lime
.bg-green
.bg-teal
.bg-cyan
.bg-black
.bg-gray
.bg-white
.bg-transparent
biến thể bóng râm
Vì màu nền sử dụng , bạn có thể dễ dàng làm cho chúng sáng hơn hoặc tối hơn. Chỉ cần sử dụng lớp
.bg-opacity-0
.bg-opacity-5
.bg-opacity-10
.bg-opacity-20
.bg-opacity-30
.bg-opacity-40
.bg-opacity-50
.bg-opacity-60
.bg-opacity-70
.bg-opacity-80
.bg-opacity-90
8 trên .bg-opacity-0
.bg-opacity-5
.bg-opacity-10
.bg-opacity-20
.bg-opacity-30
.bg-opacity-40
.bg-opacity-50
.bg-opacity-60
.bg-opacity-70
.bg-opacity-80
.bg-opacity-90
9. Mức độ bóng mặc định là 5. Bạn có thể thay đổi chúng trong biến bg[primary]
bg[secondary]
bg[success]
bg[danger]
bg[warning]
bg[info]
bg[light]
bg[dark]
bg[white]
bg[transparent]
0Ở đâu
bg[primary]
bg[secondary]
bg[success]
bg[danger]
bg[warning]
bg[info]
bg[light]
bg[dark]
bg[white]
bg[transparent]
1
2 cho các lớp làm sáng màu nềnbg[primary]
bg[secondary]
bg[success]
bg[danger]
bg[warning]
bg[info]
bg[light]
bg[dark]
bg[white]
bg[transparent]
3 cho các lớp làm đậm màu nềnbg[primary]
bg[secondary]
bg[success]
bg[danger]
bg[warning]
bg[info]
bg[light]
bg[dark]
bg[white]
bg[transparent]
Và
bg[primary]
bg[secondary]
bg[success]
bg[danger]
bg[warning]
bg[info]
bg[light]
bg[dark]
bg[white]
bg[transparent]
1 có thể là bg[primary]
bg[secondary]
bg[success]
bg[danger]
bg[warning]
bg[info]
bg[light]
bg[dark]
bg[white]
bg[transparent]
1màu sắc chủ đề
bg-chính. bg-lighten-xl
bg-chính. bg-lighten-lg
bg-chính. bg-lighten-md
bg-chính. bg-lighten-sm
bg-chính. bg-lighten-xs
bg-chính. bg-dark-xs
bg-chính. bg-dark-sm
bg-chính. bg-dark-md
bg-chính. bg-dark-lg
bg-chính. bg-dark-xl
bg-trung học. bg-lighten-xl
bg-trung học. bg-lighten-lg
bg-trung học. bg-lighten-md
bg-trung học. bg-lighten-sm
bg-trung học. bg-lighten-xs
bg-trung học. bg-dark-xs
bg-trung học. bg-dark-sm
bg-trung học. bg-dark-md
bg-trung học. bg-dark-lg
bg-trung học. bg-dark-xl
bg-success. bg-lighten-xl
bg-success. bg-lighten-lg
bg-success. bg-lighten-md
bg-success. bg-lighten-sm
bg-success. bg-lighten-xs
bg-success. bg-dark-xs
bg-success. bg-dark-sm
bg-success. bg-dark-md
bg-success. bg-dark-lg
bg-success. bg-dark-xl
cảnh báo bg. bg-lighten-xl
cảnh báo bg. bg-lighten-lg
cảnh báo bg. bg-lighten-md
cảnh báo bg. bg-lighten-sm
cảnh báo bg. bg-lighten-xs
cảnh báo bg. bg-dark-xs
cảnh báo bg. bg-dark-sm
cảnh báo bg. bg-dark-md
cảnh báo bg. bg-dark-lg
cảnh báo bg. bg-dark-xl
nguy hiểm bg. bg-lighten-xl
nguy hiểm bg. bg-lighten-lg
nguy hiểm bg. bg-lighten-md
nguy hiểm bg. bg-lighten-sm
nguy hiểm bg. bg-lighten-xs
Màu mở rộng
bg-chàm. bg-lighten-xl
bg-chàm. bg-lighten-lg
bg-chàm. bg-lighten-md
bg-chàm. bg-lighten-sm
bg-chàm. bg-lighten-xs
bg-maroon. bg-lighten-xl
bg-maroon. bg-lighten-lg
bg-maroon. bg-lighten-md
bg-maroon. bg-lighten-sm
bg-maroon. bg-lighten-xs
bg-tím. bg-lighten-xl
bg-tím. bg-lighten-lg
bg-tím. bg-lighten-md
bg-tím. bg-lighten-sm
bg-tím. bg-lighten-xs
bg-đỏ tươi. bg-lighten-xl
bg-đỏ tươi. bg-lighten-lg
bg-đỏ tươi. bg-lighten-md
bg-đỏ tươi. bg-lighten-sm
bg-đỏ tươi. bg-lighten-xs
bg-đỏ tươi. bg-dark-xs
bg-đỏ tươi. bg-dark-sm
bg-đỏ tươi. bg-dark-md
bg-đỏ tươi. bg-dark-lg
bg-đỏ tươi. bg-dark-xl
bg-cam. bg-lighten-xl
bg-cam. bg-lighten-lg
bg-cam. bg-lighten-md
bg-cam. bg-lighten-sm
bg-cam. bg-lighten-xs
bg-vàng. bg-lighten-xl
bg-vàng. bg-lighten-lg
bg-vàng. bg-lighten-md
bg-vàng. bg-lighten-sm
bg-vàng. bg-lighten-xs
Độ dốc nền
Bằng cách thêm lớp
bg[primary]
bg[secondary]
bg[success]
bg[danger]
bg[warning]
bg[info]
bg[light]
bg[dark]
bg[white]
bg[transparent]
6, độ dốc tuyến tính được thêm làm hình nền cho hình nền. Dải màu này bắt đầu với màu trắng bán trong suốt mờ dần về phía dướiBạn có cần một dải màu trong CSS tùy chỉnh của mình không?
bg-trung học. độ dốc bg
độ mờ
Thay đổi độ mờ của màu nền bằng cách thay đổi kênh alpha của nó bằng cách sử dụng
bg[primary]
bg[secondary]
bg[success]
bg[danger]
bg[warning]
bg[info]
bg[light]
bg[dark]
bg[white]
bg[transparent]
8. Có sẵn cho tất cả mặc định và, quá.bg-opacity-0
.bg-opacity-5
.bg-opacity-10
.bg-opacity-20
.bg-opacity-30
.bg-opacity-40
.bg-opacity-50
.bg-opacity-60
.bg-opacity-70
.bg-opacity-80
.bg-opacity-90
trạng thái hoạt động
Thay đổi màu nền trên trạng thái hoạt động của phần tử. Điều đó có nghĩa là, khi phần tử có trạng thái
bg[primary]
bg[secondary]
bg[success]
bg[danger]
bg[warning]
bg[info]
bg[light]
bg[dark]
bg[white]
bg[transparent]
9, khi nó có lớp bg[primary]
bg[secondary]
bg[success]
bg[danger]
bg[warning]
bg[info]
bg[light]
bg[dark]
bg[white]
bg[transparent]
0 hoặc lớp bg[primary]
bg[secondary]
bg[success]
bg[danger]
bg[warning]
bg[info]
bg[light]
bg[dark]
bg[white]
bg[transparent]
1 hoặc khi phần tử hiển thị trong chế độ xem và có lớp bg[primary]
bg[secondary]
bg[success]
bg[danger]
bg[warning]
bg[info]
bg[light]
bg[dark]
bg[white]
bg[transparent]
2. Tính năng này là một phần của Torus Kit Hiệu ứng & Tương tácĐể thay đổi màu nền, hãy sử dụng
bg[primary]
bg[secondary]
bg[success]
bg[danger]
bg[warning]
bg[info]
bg[light]
bg[dark]
bg[white]
bg[transparent]
3bg[primary]
bg[secondary]
bg[success]
bg[danger]
bg[warning]
bg[info]
bg[light]
bg[dark]
bg[white]
bg[transparent]
bg[primary]
bg[secondary]
bg[success]
bg[danger]
bg[warning]
bg[info]
bg[light]
bg[dark]
bg[white]
bg[transparent]
bg[primary]
bg[secondary]
bg[success]
bg[danger]
bg[warning]
bg[info]
bg[light]
bg[dark]
bg[white]
bg[transparent]
che nắng
Để thay đổi màu nền, hãy sử dụng
bg[primary]
bg[secondary]
bg[success]
bg[danger]
bg[warning]
bg[info]
bg[light]
bg[dark]
bg[white]
bg[transparent]
4bg-lighten[xs]
bg-lighten[sm]
bg-lighten[md]
bg-lighten[lg]
bg-lighten[xl]
bg-lighten[xs]
bg-lighten[sm]
bg-lighten[md]
bg-lighten[lg]
bg-lighten[xl]
bg-lighten[xs]
bg-lighten[sm]
bg-lighten[md]
bg-lighten[lg]
bg-lighten[xl]
bg-darken[xs]
bg-darken[sm]
bg-darken[md]
bg-darken[lg]
bg-darken[xl]
bg-darken[xs]
bg-darken[sm]
bg-darken[md]
bg-darken[lg]
bg-darken[xl]
bg-darken[xs]
bg-darken[sm]
bg-darken[md]
bg-darken[lg]
bg-darken[xl]
độ mờ
Để thay đổi màu nền, hãy sử dụng
bg[primary]
bg[secondary]
bg[success]
bg[danger]
bg[warning]
bg[info]
bg[light]
bg[dark]
bg[white]
bg[transparent]
5.bg-blue
.bg-indigo
.bg-navy
.bg-maroon
.bg-brown
.bg-purple
.bg-pink
.bg-magenta
.bg-red
.bg-orange
.bg-yellow
.bg-lime
.bg-green
.bg-teal
.bg-cyan
.bg-black
.bg-gray
.bg-white
.bg-transparent
2.bg-blue
.bg-indigo
.bg-navy
.bg-maroon
.bg-brown
.bg-purple
.bg-pink
.bg-magenta
.bg-red
.bg-orange
.bg-yellow
.bg-lime
.bg-green
.bg-teal
.bg-cyan
.bg-black
.bg-gray
.bg-white
.bg-transparent
2.bg-blue
.bg-indigo
.bg-navy
.bg-maroon
.bg-brown
.bg-purple
.bg-pink
.bg-magenta
.bg-red
.bg-orange
.bg-yellow
.bg-lime
.bg-green
.bg-teal
.bg-cyan
.bg-black
.bg-gray
.bg-white
.bg-transparent
2ngổ ngáo
Ngoài chức năng Sass sau đây, 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] để biết màu sắc và hơn thế nữa
Biến
Hầu hết các tiện ích
bg[primary]
bg[secondary]
bg[success]
bg[danger]
bg[warning]
bg[info]
bg[light]
bg[dark]
bg[white]
bg[transparent]
6 được tạo bởi các 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.bg-blue
.bg-indigo
.bg-navy
.bg-maroon
.bg-brown
.bg-purple
.bg-pink
.bg-magenta
.bg-red
.bg-orange
.bg-yellow
.bg-lime
.bg-green
.bg-teal
.bg-cyan
.bg-black
.bg-gray
.bg-white
.bg-transparent
5.bg-blue
.bg-indigo
.bg-navy
.bg-maroon
.bg-brown
.bg-purple
.bg-pink
.bg-magenta
.bg-red
.bg-orange
.bg-yellow
.bg-lime
.bg-green
.bg-teal
.bg-cyan
.bg-black
.bg-gray
.bg-white
.bg-transparent
6.bg-blue
.bg-indigo
.bg-navy
.bg-maroon
.bg-brown
.bg-purple
.bg-pink
.bg-magenta
.bg-red
.bg-orange
.bg-yellow
.bg-lime
.bg-green
.bg-teal
.bg-cyan
.bg-black
.bg-gray
.bg-white
.bg-transparent
7Mà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 bất kỳ tiện ích nào
.bg-blue
.bg-indigo
.bg-navy
.bg-maroon
.bg-brown
.bg-purple
.bg-pink
.bg-magenta
.bg-red
.bg-orange
.bg-yellow
.bg-lime
.bg-green
.bg-teal
.bg-cyan
.bg-black
.bg-gray
.bg-white
.bg-transparent
8Bả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 các tiện ích, công cụ sửa đổi thành phần, v.v.
.bg-blue
.bg-indigo
.bg-navy
.bg-maroon
.bg-brown
.bg-purple
.bg-pink
.bg-magenta
.bg-red
.bg-orange
.bg-yellow
.bg-lime
.bg-green
.bg-teal
.bg-cyan
.bg-black
.bg-gray
.bg-white
.bg-transparent
9Màu thang độ 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
.bg-opacity-0
.bg-opacity-5
.bg-opacity-10
.bg-opacity-20
.bg-opacity-30
.bg-opacity-40
.bg-opacity-50
.bg-opacity-60
.bg-opacity-70
.bg-opacity-80
.bg-opacity-90
0hỗn hợp
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 tình huống khác mà bạn muốn tạo độ dốc của riêng mình
.bg-opacity-0
.bg-opacity-5
.bg-opacity-10
.bg-opacity-20
.bg-opacity-30
.bg-opacity-40
.bg-opacity-50
.bg-opacity-60
.bg-opacity-70
.bg-opacity-80
.bg-opacity-90
1API tiện ích
Tiện ích nền được khai báo trong API tiện ích của chúng tôi trong
bg[primary]
bg[secondary]
bg[success]
bg[danger]
bg[warning]
bg[info]
bg[light]
bg[dark]
bg[white]
bg[transparent]
7. Tìm hiểu cách sử dụng API tiện ích