Sử dụng HTML, CSS tạo hiển thị văn bản trên đầu hình ảnh bằng cách sử dụng lớp phủ Mã HTML Mã CSS Trình soạn thảo HTML-CSS Xem Bài tập html-css-thực tế trên Bút của w3resource (@w3resource) trên CodePenHTML-CSS. Bài tập-4 có lời giải
Mức độ khó của bài tập này là gì?
Dễ dàng trung bình khóKiểm tra kỹ năng Lập trình của bạn với bài kiểm tra của w3resource
Theo dõi chúng tôi trên Facebook và Twitter để cập nhật thông tin mới nhất.
HTML-CSS. Lời khuyên trong ngày
Đặt đường viền bên trong div chứ không phải trên cạnh của nó?
Đặt thuộc tính kích thước hộp thành hộp viền
div { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; width: 100px; height: 100px; border: 20px solid #f00; background: #00f; margin: 10px; } div + div { border: 10px solid red; } <div>Hello!</div> <div>Hello!</div>
- Xu hướng hàng tuần
- Bài tập lập trình Java cơ bản
- Truy vấn con SQL
- Bài tập cơ sở dữ liệu Adventureworks
- Bài tập cơ bản C# Sharp
- SQL COUNT() với sự khác biệt
- Bài tập chuỗi JavaScript
- Xác thực biểu mẫu HTML JavaScript
- Bài tập bộ sưu tập Java
- hàm SQL COUNT()
- Tham gia bên trong SQL
- Hàm JavaScript Bài tập
- Hướng dẫn Python
- Bài tập mảng Python
- Tham gia chéo SQL
- Bài tập về mảng Sharp trong C#
Khi tạo thư viện ảnh hoặc thứ gì đó tương tự, bạn có thể cần đặt một số văn bản chú thích hoặc mô tả lên hình ảnh. Bạn có thể sử dụng các phương pháp định vị CSS kết hợp với thuộc tính margin để định vị hoặc đặt văn bản trên một hình ảnh (i. e. phần tử
Flying Kites
Câu hỏi thường gặp liên quan
Dưới đây là một số câu hỏi thường gặp khác liên quan đến chủ đề này
Bạn có thể bắt gặp một thành phần giao diện người dùng có văn bản phía trên hình ảnh. Trong một số trường hợp, văn bản sẽ khó đọc tùy thuộc vào hình ảnh được sử dụng. Có một số giải pháp khác nhau như thêm lớp phủ chuyển màu hoặc hình nền được tô màu, đổ bóng văn bản và các giải pháp khác. Tôi được khuyến khích viết bài này sau khi xem dòng tweet này từ Addy Osmani
Trong bài viết này, tôi sẽ khám phá các cách tiếp cận và giải pháp khác nhau cho vấn đề này cũng như cách giao tiếp giao diện người dùng với nhà phát triển giao diện người dùng để đảm bảo rằng nó được triển khai theo mô hình thiết kế vì một số chi tiết có thể dễ dàng bị bỏ sót trong CSS
Giới thiệu
Mỗi giải pháp được cho là để giải quyết một vấn đề. Hãy khám phá vấn đề cho trường hợp của chúng tôi. Khi thiết kế một thành phần có văn bản phía trên hình ảnh, chúng ta nên chú ý làm cho văn bản dễ đọc
Lưu ý rằng phiên bản không có lớp phủ gradient hầu như không thể đọc được. Điều này không tốt cho người dùng. Để giải quyết vấn đề này, chúng ta cần thêm một lớp bên dưới văn bản để có thể dễ dàng đọc. Việc thêm lớp đó có thể là một thách thức và tôi đã thấy nhiều người triển khai giải pháp này mà không tính đến khả năng tiếp cận
Tổng quan về các giải pháp khả thi
Có nhiều giải pháp khác nhau để làm cho văn bản dễ đọc hơn. Hãy có cái nhìn tổng quan về chúng
Như bạn đã thấy, có nhiều giải pháp khác nhau cho vấn đề. Những cái cần chăm sóc nhiều hơn là các giải pháp gradient. Tại sao?
Bản đồ đường viền
Lớp phủ gradient
Nói chung, lớp phủ chuyển màu là giải pháp phổ biến nhất để làm cho văn bản trên hình ảnh rõ ràng hơn nhiều. Do đó, tôi sẽ tập trung hơn một chút vào nó
Khi triển khai lớp phủ gradient, chúng tôi có hai tùy chọn
- Sử dụng một phần tử riêng biệt cho dải màu (phần tử giả hoặc một .card__content { position: absolute; /* other styles (left, top, right, and padding) */ display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent); } 0 trống)
- Áp dụng gradient làm hình nền
Mỗi một trong những điều trên đều có ưu và nhược điểm, hãy cùng điểm qua chúng
Phần tử nội dung được định vị tuyệt đối và nó có độ dốc làm hình nền. Điều đó có nghĩa là kích thước gradient bằng với chiều cao của phần tử
.card__content { position: absolute; /* other styles (left, top, right, and padding) */ background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent); }
Ngay từ cái nhìn đầu tiên, bạn có thể nghĩ rằng độ dốc tốt và nó đang hoạt động. Điều này không chính xác. Tôi đã thử nghiệm cùng một độ dốc với nhiều hình ảnh hơn và đây là kết quả
Lưu ý rằng độ tương phản giữa văn bản màu trắng và hình ảnh không phải lúc nào cũng rõ ràng. Điều này có thể đọc được đối với một số người, nhưng đó là một sai lầm lớn khi sử dụng một gradient như vậy vì nó sẽ không thể truy cập được
Lý do là gradient sẽ bao phủ nhiều không gian hơn theo chiều dọc, vì vậy nó cần có chiều cao lớn hơn. Có độ dốc bằng với kích thước của nội dung sẽ không hoạt động trong mọi trường hợp. Để giải quyết vấn đề này, chúng ta có thể sử dụng .card__content { position: absolute; /* other styles (left, top, right, and padding) */ display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent); } 1 như bên dưới
- .card__content { position: absolute; /* other styles (left, top, right, and padding) */ display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent); } 1 đến phần tử .card__content { position: absolute; /* other styles (left, top, right, and padding) */ display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent); } 3
- Flexbox để đẩy nội dung xuống dưới cùng
.card__content { position: absolute; /* other styles (left, top, right, and padding) */ display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent); }
Một giải pháp khác là chỉ cần sử dụng một .card__content { position: absolute; /* other styles (left, top, right, and padding) */ display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent); } 4 lớn và chúng tôi không cần .card__content { position: absolute; /* other styles (left, top, right, and padding) */ display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent); } 1 và flexbox
.card__content { position: absolute; padding-top: 60px; background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent); }
Lưu ý sự khác biệt giữa thẻ bên trái và bên phải. Độ dốc lớn hơn về chiều cao
Được rồi, điều đó có vẻ tốt. Chúng ta có thể làm tốt hơn không?
Giảm độ dốc
Nếu bạn nhìn kỹ, bạn sẽ nhận thấy rằng rõ ràng nơi kết thúc của gradient, dẫn đến một thứ gọi là cạnh cứng
Để làm điều này tốt hơn, chúng ta có thể áp dụng khái niệm nới lỏng cho gradient. Bằng cách đó, độ dốc sẽ xuất hiện tự nhiên hơn và bạn sẽ không nhận thấy một cạnh cứng ở cuối của nó
Trong CSS, chúng ta cần có nhiều điểm dừng chuyển màu để đạt được sự nới lỏng, vì không có cách riêng nào để làm điều này tại thời điểm viết bài này. Tin vui là nhóm làm việc CSS đang thảo luận về khả năng thực hiện nới lỏng trong CSS gradient, nhưng không rõ khi nào điều đó sẽ xảy ra
Rất may, ông. Andreas Larsen đã tạo một plugin PostCSS và Phác thảo tiện dụng giúp chuyển đổi một gradient bình thường thành một gradient dễ dàng
Đây là gradient CSS cho ví dụ trên
.card__content { background-image: linear-gradient( 0deg, hsla(0, 0%, 35.29%, 0) 0%, hsla(0, 0%, 34.53%, 0.034375) 16.36%, hsla(0, 0%, 32.42%, 0.125) 33.34%, hsla(0, 0%, 29.18%, 0.253125) 50.1%, hsla(0, 0%, 24.96%, 0.4) 65.75%, hsla(0, 0%, 19.85%, 0.546875) 79.43%, hsla(0, 0%, 13.95%, 0.675) 90.28%, hsla(0, 0%, 7.32%, 0.765625) 97.43%, hsla(0, 0%, 0%, 0.8) 100% ); }
Dưới đây là so sánh giữa thẻ nới lỏng và không nới lỏng
Độ dốc ngang
Xử lý văn bản trên hình ảnh không thể chỉ theo chiều dọc mà chúng ta còn có thể sử dụng chúng dưới dạng chuyển màu ngang. Lấy ví dụ một phần anh hùng. Nó cần một gradient ngang trong trường hợp đó
Đây là gradient CSS cho phần anh hùng ở trên. Tôi đã sử dụng công cụ được đề cập trước đây để tạo độ dốc giảm bớt
background: linear-gradient( to right, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0.964) 7.4%, hsla(0, 0%, 0%, 0.918) 15.3%, hsla(0, 0%, 0%, 0.862) 23.4%, hsla(0, 0%, 0%, 0.799) 31.6%, hsla(0, 0%, 0%, 0.73) 39.9%, hsla(0, 0%, 0%, 0.655) 48.2%, hsla(0, 0%, 0%, 0.577) 56.2%, hsla(0, 0%, 0%, 0.497) 64%, hsla(0, 0%, 0%, 0.417) 71.3%, hsla(0, 0%, 0%, 0.337) 78.1%, hsla(0, 0%, 0%, 0.259) 84.2%, hsla(0, 0%, 0%, 0.186) 89.6%, hsla(0, 0%, 0%, 0.117) 94.1%, hsla(0, 0%, 0%, 0.054) 97.6%, hsla(0, 0%, 0%, 0) 100% );
Trộn một màu đơn sắc và một gradient
Tôi đã biết về mô hình này từ trang web Netflix. Trên trang chủ dành cho người dùng chưa đăng nhập, có dòng tiêu đề với hình nền lớn
Tôi thích nó, nhưng nó ẩn rất nhiều chi tiết hình ảnh. Đảm bảo chỉ sử dụng điều này khi hình ảnh được dùng để trang trí (không mang lại lợi ích thực sự cho người dùng cuối)
<div class="hero"> <img src="cover.jpg" alt="" /> <div class="hero__content"> <h2>Unlimited movies, TV shows, and more.</h2> <p>Watch anywhere. Cancel anytime.</p> </div> </div>
.hero:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); background-image: linear-gradient( to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.8) 100% ); }
Dưới đây là một lời giải thích trực quan về cách thức hoạt động của mô hình này
Lớp phủ chuyển màu và đổ bóng văn bản
Có một liên lạc nhỏ hữu ích có thể làm cho văn bản trên hình ảnh tốt hơn. Đó là tất cả về việc thêm một .card__content { position: absolute; /* other styles (left, top, right, and padding) */ display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent); } 6 tinh tế cho văn bản. Ngay cả khi điều này có thể không dễ nhận thấy, nó có thể rất hữu ích trong trường hợp hình ảnh không tải được
Xem xét ví dụ sau
.whatever-text { text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); }
Lớp phủ chuyển màu, đổ bóng văn bản và độ mờ
Đây là mẫu mà tôi nhận thấy trên trình phát video của Facebook. Tôi thích rằng họ đã sử dụng nhiều kỹ thuật để làm cho văn bản (và các thành phần giao diện người dùng khác) rõ ràng. Khi xử lý trình phát video, điều rất quan trọng là phải đảm bảo rằng một phần tử phía trên nó phải được chú ý
.player__icon { opacity: 0.9; } .player__time { color: #fff; text-shadow: 0 0 5px #fff; }
Điểm mới ở đây là các biểu tượng và trình phát có .card__content { position: absolute; /* other styles (left, top, right, and padding) */ display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent); } 7. Điều này sẽ giúp làm cho chúng hòa trộn với nền bên dưới chúng. Nó mang lại cảm giác rằng các điều khiển được pha trộn
Ngoài ra, sử dụng text-shadow màu trắng cho chữ trắng cũng là một cách hiệu quả để làm cho chữ rõ ràng hơn. Bạn có muốn bằng chứng rằng những điều trên sẽ hoạt động, ngay cả khi nền là một hình ảnh hoàn toàn màu trắng?
Youtube cũng đang làm điều tương tự với video của họ
Đây là những gì tôi thích về cách tiếp cận của Youtube
- Sử dụng viền tối cho từng icon để nó nổi bật hơn
- Sử dụng bóng đen thay vì màu trắng cho thời gian video
Độ dốc xuyên tâm
Một giải pháp thú vị mà tôi đã học được từ Netflix là sử dụng gradient xuyên tâm. Đây là cách nó làm việc
- Đặt màu nền phía sau cơ sở cho anh hùng
- Định vị hình ảnh ở trên cùng bên phải với 75% chiều rộng
- Lớp phủ bằng với kích thước và vị trí hình ảnh
.hero { background-color: #000; min-height: 300px; } .hero__image { position: absolute; right: 0; top: 0; width: 75%; height: 100%; object-fit: cover; } .hero:after { content: ""; position: absolute; right: 0; top: 0; width: 75%; height: 100%; background: radial-gradient( ellipse 100% 100% at right center, transparent 80%, #000 ); }
Mặc dù vậy, nhóm Netflix đã sử dụng một. hình ảnh png cho lớp phủ. Tôi không chắc về lý do. Nó có thể là một vấn đề giữa nhiều trình duyệt hoặc một cái gì đó vì tôi đã không thử nghiệm nhiều giải pháp gradient xuyên tâm
Chọn màu lớp phủ có thể truy cập
Đây là một công cụ tuyệt vời giúp chúng tôi chọn độ mờ của lớp phủ phù hợp dựa trên hình ảnh. Kiểm tra nó trên Codepen. Một thách thức thú vị là xử lý khả năng truy cập cho một gradient
Nói chung, nếu bạn chắc chắn rằng lớp phủ chuyển màu lấp đầy văn bản một cách chính xác và nó có độ tương phản màu tốt, thì bạn đã sẵn sàng
thử nghiệm
Một giải pháp không thể được coi là tốt cho đến khi nó được thử nghiệm, phải không? . Nếu văn bản có thể đọc được thì gradient sẽ hoạt động với bất kỳ hình ảnh nào bạn sử dụng. Nếu không, bạn cần điều chỉnh và nâng cao nó
Đối với ví dụ trên, tôi chọn màu đồng nhất dưới tiêu đề và tỷ lệ tương phản là 4. 74, được coi là tốt
Sử dụng Firefox DevTools
Cảm ơn Gijs Veyfeyken đã cho tôi biết về việc Firefox có thể thực hiện kiểm tra độ tương phản màu trên các dải màu. Đó là một tính năng tuyệt vời