Hình nền hàng bootstrap

Tạo hình nền phản hồi trên bất kỳ thành phần nào mà không cần bất kỳ mã CSS nào. Chỉ cần thêm lớp

  
Background blend mode: Multiply
  
 Nội dung chính Show
 
Phần anh hùng
Hero Section
Chế độ hòa trộn nền
lớp phủ
Hình nền phù hợp với đối tượng
Câu hỏi thường gặp về hình nền Bootstrap
Cách thay đổi độ mờ của ảnh nền Bootstrap
 

8 vào phần tử

  
Background blend mode: Multiply
  

9 của bạn và lớp

  
Background blend mode: Multiply
  

0 vào phần tử cha mà bạn muốn áp dụng hình nền. Hình ảnh là một phần của DOM và được chuyển đổi thành CSS

  
Background blend mode: Multiply
  

1 sau khi chúng được tải đầy đủ. Cũng có thể trộn hình nền với màu nền bằng cách sử dụng

Thí dụ

Một ví dụ cơ bản về biểu ngữ phần anh hùng với ảnh nền. Hình nền tự động điều chỉnh khu vực của phần tử bằng cách sử dụng

  
Background blend mode: Multiply
  

2

Phần anh hùng

Thật dễ dàng để đặt hình nền với Torus Kit

  
Hero Section
  
It's easy to set background image with Torus Kit
  

Chế độ hòa trộn nền

Để trộn hình nền với màu nền cùng nhau, hãy sử dụng một trong các

  
Background blend mode: Multiply
  

0. Nếu không thì chỉ có hình nền được hiển thị

nhân

Thêm lớp

  
Background blend mode: Multiply
  

1 vào lớp

  
Background blend mode: Multiply
  

0 để sử dụng chế độ hòa trộn nhiều lần

Chế độ hòa trộn nền. nhân

  
Background blend mode: Multiply
  

lớp phủ

Thêm lớp

  
Background blend mode: Multiply
  

3 vào lớp

  
Background blend mode: Multiply
  

0 để sử dụng chế độ hòa trộn lớp phủ

Chế độ hòa trộn nền. lớp phủ

  
Background blend mode: Multiply
  

Màn hình

Thêm lớp

  
Background blend mode: Multiply
  

5 vào lớp

  
Background blend mode: Multiply
  

0 để sử dụng chế độ hòa trộn màn hình

Chế độ hòa trộn nền. Màn hình

  
Background blend mode: Multiply
  

Hình nền phù hợp với đối tượng

Có thể tạo ảnh nền chỉ bằng cách sử dụng các lớp tiện ích có sẵn. Thêm lớp

  
Background blend mode: Multiply
  

7 vào hình nền, làm cho nó được định vị tuyệt đối và đặt

  
Background blend mode: Multiply
  

8 và

  
Background blend mode: Multiply
  

9. Thêm lớp

  
Background blend mode: Multiply
  

0 vào lớp

  
Background blend mode: Multiply
  

9 này để làm cho hình ảnh lấp đầy khoảng trống. Ngoài ra, hãy đảm bảo đặt vị trí thành phần tử cha. Bạn có thể sử dụng lớp tiện ích vị trí

Vì phần tử

  
Background blend mode: Multiply
  

7 sẽ xuất hiện phía trên nội dung nên bạn cần thêm lớp

  
Background blend mode: Multiply
  

3 và

  
Background blend mode: Multiply
  

4 vào nội dung này

Hình nền với

  
Background blend mode: Multiply
  

0

  
Background blend mode: Multiply
  

6

Câu hỏi thường gặp về hình nền Bootstrap

Cách thay đổi độ mờ của ảnh nền Bootstrap

Bạn không thể trực tiếp kiểm soát độ mờ của CSS

  
Background blend mode: Multiply
  

1, nhưng bạn có thể sử dụng và đặt

  
Background blend mode: Multiply
  

7 cho hình ảnh bằng lớp độ mờ