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 KitChú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 FlexThí 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
2Lớ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ốnNền vững chắc
Default overlay
9Lớp phủ dốc
Default overlay
9cườ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 _______ 192Cườ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
8Với nền dốc
Default overlay
9Cường độ lớp phủ màu
Với nền tảng vững chắcMàu chính Màu phụ Màu nhạtVới nền dốcMàu chính Màu phụ Màu nhạtlớ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
4Lớ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 ảnhNhư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 ảnhCá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
98Lớp phủ nội dung trên CSS
Default overlay
94Lớ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
22Với nền tảng vững chắc
Default overlay
1Với nền dốc
Default overlay
2Hiệ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