Cách hiển thị văn bản trên hình ảnh với chế độ hòa trộn CSS3
Hình nền nhìn tuyệt vời đằng sau văn bản hiển thị lớn. Tuy nhiên, việc thực hiện CSS của nó không đơn giản như vậy. Chúng ta có thể sử dụng clip nền: văn bản; tuy nhiên, đây vẫn là một tính năng thử nghiệm mà không có sự hỗ trợ của trình duyệt.
Thay thế CSS để hiển thị nền hình ảnh phía sau văn bản là sử dụng chế độ trộn bất động sản. Chế độ hòa trộn cho các phần tử HTML được hỗ trợ khá nhiều trên tất cả các trình duyệt máy tính để bàn và thiết bị di động hiện đại, ngoại trừ một số ít, chẳng hạn như Internet Explorer.
Trong bài viết này, chúng ta sẽ xem làm thế nào chế độ trộn (cụ thể hai chế độ của nó) hoạt động và cách bạn có thể sử dụng nó để hiển thị một văn bản với nền hình ảnh trong hai trường hợp sử dụng:
- khi hình nền có thể được nhìn thấy thông qua văn bản
- khi hình nền chạy vòng quanh văn bản
Xem một số ví dụ trong bản demo bên dưới (hình ảnh từ unsplash.com).
Các chế độ trộn Thuộc tính CSS định nghĩa như thế nào Nội dung và bối cảnh của một phần tử HTML nên hòa trộn với nhau theo màu.
Hãy xem danh sách các chế độ hòa trộn, trong đó chúng tôi sẽ sử dụng nhân và màn trong bài này.
Trước tiên, hãy xem xét cách hai chế độ pha trộn cụ thể này hoạt động.
Làm sao nhân & màn chế độ pha trộn làm việc
Chế độ hòa trộn về mặt kỹ thuật là các chức năng tính giá trị màu cuối cùng sử dụng các thành phần màu của một yếu tố và phông nền của nó.
Các nhân chế độ hòa trộn
bên trong nhân chế độ pha trộn, màu sắc riêng của các yếu tố và phông nền của chúng là nhân lên, và màu kết quả được áp dụng cho phiên bản pha trộn cuối cùng.
Các nhân chế độ pha trộn được tính theo công thức sau:
B (Cb, Cs) = Cb × Cs
Ở đâu:Cb - Thành phần màu của phông nềnCs - Thành phần màu của phần tử nguồnB - Chức năng trộn
Khi nào Cb và Cs được nhân lên, màu kết quả là sự pha trộn của hai thành phần màu này và tối như tối nhất trong hai màu.
Để tạo nền hình ảnh văn bản của chúng tôi, chúng ta cần tập trung vào trường hợp khi Cs (thành phần màu của phần tử nguồn) là đen hoặc trắng.
Nếu Cs Là đen giá trị của nó là 0, màu đầu ra cũng sẽ là màu đen, bởi vì Cb × 0 = 0. Vì vậy, khi phần tử được tô màu đen, nó không quan trọng màu nền là gì, tất cả những gì chúng ta có thể thấy sau khi trộn là màu đen.
Nếu Cs Là trắng giá trị của nó là 1, màu đầu ra là bất cứ thứ gì Cb là vìCb × 1 = Cb. Vì vậy, trong trường hợp này, chúng ta nhìn thấy phông nền trực tiếp như nó là.
Các màn chế độ hòa trộn
Các màn chế độ hòa trộn hoạt động tương tự như nhân chế độ pha trộn, nhưng với kết quả ngược lại. Vì vậy, một tiền cảnh đen cho thấy bối cảnh như nó là, và một tiền cảnh màu trắng cho thấy màu trắng với bất kỳ bối cảnh nào.
Hãy nhanh chóng xem công thức của nó:
B (Cb, Cs) = Cb + Cs - (Cb × Cs)
Khi nào Cs Là đen (0), màu nền sẽ được hiển thị sau khi trộn, như:
Cb + 0 - (Cb × 0) = Cb + 0 - 0 = Cb
Khi nào Cs Là trắng (1) kết quả sẽ có màu trắng với bất kỳ phông nền nào, như:
Cb + 1 - (Cb × 1) = Cb + 1 - Cb = 1
1. Hình ảnh được hiển thị qua văn bản
Để hiển thị văn bản hiển thị thông qua hình nền của nó, chúng tôi sử dụng màn chế độ hòa trộn với văn bản màu đen và không gian xung quanh màu trắng.
Nước
.phông nền chiều rộng: 600px; chiều cao: 210px; hình nền: url (someimage.jpg); kích thước nền: 100%; lề: tự động; .text màu: đen; màu nền: trắng; trộn-trộn-chế độ: màn hình; chiều rộng: 100%; chiều cao: 100%; cỡ chữ: 160pt; font-weight: đậm hơn; văn bản-align: trung tâm; chiều cao dòng: 210px; lề: 0;
Hiện tại văn bản của chúng tôi trông như dưới đây, trong bước tiếp theo, chúng tôi sẽ thêm màu tùy chỉnh vào nền.
Thêm màu
Như bạn có thể đoán bây giờ, sử dụng các chế độ hòa trộn chỉ để lại cho chúng tôi hai lựa chọn màu cho khu vực bao quanh văn bản - màu đen hoặc màu trắng. Tuy nhiên với màu trắng, có thể thêm một số màu cho nó sử dụng lớp phủ, nếu màu lớp phủ phù hợp độc đáo với hình ảnh được sử dụng.
Để thêm màu cho khu vực xung quanh, thêm một Nước Với kỹ thuật này, chúng ta có thể tô màu khu vực xung quanh văn bản bằng nền hình ảnh: Lưu ý rằng kỹ thuật chỉ hoạt động tốt với màu sắc trong suốt tinh tế. Nếu bạn sử dụng màu đục hoàn toàn hoặc màu không khớp với hình ảnh, hình ảnh xuất hiện bên trong văn bản sẽ có màu sắc rất rõ ràng của màu được sử dụng, vì vậy trừ khi đó là giao diện mà bạn đang tìm kiếm, tránh màu đục. Mặc dù vị trí văn bản bình thường trên nền hình ảnh đòi hỏi kỹ thuật tương tự, Tôi sẽ cho bạn thấy một ví dụ về bản demo ở trên trông như thế nào khi hiệu ứng bị đảo ngược, tức là khi màu văn bản là màu trắng và nền màu đen. Bạn có thể dùng cùng lớp phủ để thêm một số màu cho văn bản, trừ khi bạn muốn giữ nó màu trắng. Và bên dưới bạn có thể thấy trường hợp ngược lại trông như thế nào: Lưu ý rằng trong Internet Explorer hoặc bất kỳ trình duyệt nào khác không hỗ trợ trộn-trộn-chế độ: nhân thuộc tính cho lớp phủ, vì nó giúp màu nền của lớp phủ thành pha trộn tốt hơn một chút với hình ảnh xuất hiện bên trong văn bản.
.lớp phủ màu nền: rgba (0,255,255, .1); trộn-trộn-chế độ: nhân lên; chiều rộng: 100%; chiều cao: 100%; vị trí: tuyệt đối; đầu trang: 0;
2. Văn bản được bao quanh bởi nền hình ảnh
.văn bản màu: trắng; màu nền: đen; trộn-trộn-chế độ: màn hình; chiều rộng: 100%; chiều cao: 100%; cỡ chữ: 160pt; font-weight: đậm hơn; văn bản-align: trung tâm; chiều cao dòng: 210px; lề: 0;
.lớp phủ màu nền: rgba (0,255,255, .1); trộn-trộn-chế độ: nhân lên; chiều rộng: 100%; chiều cao: 100%; vị trí: tuyệt đối; đầu trang: 0;
chế độ trộn thuộc tính, nền hình ảnh sẽ không xuất hiện và văn bản sẽ vẫn màu đen (hoặc trắng).
