Bootstrap lớp phủ tối

Tạo lớp phủ màu CSS cho phép văn bản có thể đọc được trên hình nền hoặc màu nền với lớp lớp phủ

Tổng quan

Lớp phủ rất tốt để làm cho nội dung dễ đọc hơn trên nền sáng. Chúng thường được sử dụng trên các phần anh hùng, thẻ, jumbotron, v.v. Torus Kit lớp

  
Default overlay

0 áp dụng một

  
Default overlay

1 mặc định với

  
Default overlay

2. Bạn có thể thay đổi màu nền mặc định hoặc tạo lớp phủ động tùy chỉnh khi di chuột cùng với hiệu ứng Torus Kit

Chúng tôi đang sử dụng phần tử giả

  
Default overlay

3 để tạo hiệu ứng lớp phủ. Sử dụng lớp

  
Default overlay

4 để dễ dàng tạo nội dung được định vị tuyệt đối với phần đệm mặc định. Bởi vì

  
Default overlay

4 sử dụng

  
Default overlay

6, thật dễ dàng để định vị nội dung với các tiện ích Flex

Thí dụ

Ví dụ về hiệu ứng lớp phủ Bootstrap trên các phần tử sử dụng hình nền Torus Kit trên thẻ Bootstrap và lớp phủ tùy chỉnh khi di chuột bằng hiệu ứng Torus Kit

lớp phủ

  

    

      
Default overlay

      

    

  
  

    

      
Primary overlay

      
    

  
  

    

      
Gradient overlay

      
    

  

Lớp phủ thẻ

Lớp phủ với màu nền mặc định

Lớp phủ màu

Lớp phủ với màu nền chính

Lớp phủ khi di chuột

Lớp phủ với màu nền, độ trong suốt và hiệu ứng tùy chỉnh

Lớp phủ mặc định

Sử dụng lớp

  
Default overlay

0 để tạo lớp phủ với màu nền mặc định là

  
Default overlay

8 và

  
Default overlay

2. Thêm lớp

  
Default overlay

4 vào nội dung bên trong để đặt vị trí tuyệt đối và phần đệm

  
Default overlay

21 mặc định

  
Default overlay

Lớp phủ dốc

Nếu màu nền đồng nhất không phải là thứ bạn đang tìm kiếm, hãy sử dụng

  
Default overlay

22 để tạo dải màu trong suốt đẹp mắt

  
Default overlay

2

Lớp phủ màu

Bạn không bị giới hạn ở màu nền lớp phủ màu đen. Thêm lớp

  
Default overlay

23 vào phần tử

  
Default overlay

0 hoặc

  
Default overlay

22 để đặt màu nền mong muốn

Nền vững chắc

  
Default overlay

9

Lớp phủ dốc

  
Default overlay

9

cường độ lớp phủ

Nếu cường độ (độ mờ) của lớp phủ mặc định quá mạnh hoặc quá nhạt, bạn có thể thay đổi nó bằng cách thêm phần tử

  
Default overlay

26 vào thành phần

  
Default overlay

0 hoặc

  
Default overlay

22. Biến thể

  
Default overlay

29 thay đổi độ mờ thành ________ 190, trong khi biến thể

  
Default overlay

91 thay đổi thành _______ 192

Cường độ lớp phủ mặc định

Lớp phủ mặc định (màu đen) mà không có bất kỳ sửa đổi nào

Với nền tảng vững chắc

  
Default overlay

8

Với nền dốc

  
Default overlay

9

Cường độ lớp phủ màu

Với nền tảng vững chắc

Màu chính Màu phụ Màu nhạt

Với nền dốc

Màu chính Màu phụ Màu nhạt

lớp phủ thẻ

Thật dễ dàng để đặt lớp phủ cho hình ảnh thẻ Bootstrap. Nếu

  
Default overlay

93 của bạn nằm trong

  
Default overlay

94, chỉ cần thêm lớp

  
Default overlay

0 với

  
Default overlay

96 để tắt phần đệm mặc định

  
Default overlay

4

Lớp phủ hình ảnh

Mục đích chính của lớp phủ là tách nội dung khỏi hình nền, nhưng vẫn hiển thị cả hai. Tất cả các ví dụ trên được sử dụng với hình nền. Rất tiếc, không thể thêm trực tiếp

  
Default overlay

0 vào

  
Default overlay

98 vì các phần tử giả

  
Default overlay

3 và

  
Default overlay

90 không hoạt động trên hình ảnh

Nhưng bạn có thể bọc

  
Default overlay

98 cho một số thành phần bao bọc và thêm lớp

  
Default overlay

0. Tùy chọn thêm lớp

  
Default overlay

93 vào hình ảnh

Cách thứ hai để thêm lớp phủ phía trên hình ảnh là tạo CSS ________ 194 từ ________ 195 mong muốn. Bạn có thể sử dụng tiện ích Ảnh nền Torus Kit. Lưu ý rằng bạn cần đặt một số chiều cao một cách rõ ràng cho phần tử cha

  
Default overlay

0, vì

  
Default overlay

97 nhận được

  
Default overlay

98

Lớp phủ nội dung trên CSS

  
Default overlay

94

Lớp phủ di chuột

Khi bạn cần tăng cường độ lớp phủ (độ mờ) khi di chuột, hãy thêm lớp

  
Default overlay

80 vào phần tử

  
Default overlay

0 hoặc

  
Default overlay

22

Với nền tảng vững chắc

  
Default overlay

1

Với nền dốc

  
Default overlay

2

Hiệu ứng lớp phủ nâng cao

Bằng cách sử dụng tính năng Hiệu ứng, bạn có thể đạt được các hiệu ứng chuyển tiếp lớp phủ động phức tạp. Dưới đây là một số ví dụ sử dụng cả lớp tiện ích

  
Default overlay

0 và lớp phủ màu tùy chỉnh với sự trợ giúp của lớp

  
Default overlay

84 tự động đặt

  
Default overlay

85