Lớp phủ hình nền css
Lớp phủ là các hiệu ứng được sử dụng để tạo thêm một lớp bên trên hình ảnh. Mục đích của chúng có thể là vì tính thẩm mỹ hoặc để cải thiện khả năng đọc văn bản, đặc biệt đối với những người khiếm thị Show
Chúng tôi thường tạo lớp phủ trong CSS để lấy hình ảnh đằng sau văn bản, biểu tượng hoặc hình ảnh khác. Hướng dẫn này sẽ chỉ cho bạn cách áp dụng các lớp phủ độc đáo trên cả hình nền và các phần tử .image_wrapper { position: relative; } img { display: block; object-fit: cover; width: 100%; height: auto; } .overlay { position: absolute; } .overlay_0 { left: 0; top: 0; padding: .5rem; margin: 4px; background: #f4208f; }0 thông thường trong CSS. chúng tôi sẽ bao gồm
Tính năng bố cục định vị trong CSSCác kỹ thuật tạo lớp phủ trên hình ảnh liên quan đến việc hiểu các tính năng bố cục CSS như định vị. Khi làm việc với các phần tử .image_wrapper { position: relative; } img { display: block; object-fit: cover; width: 100%; height: auto; } .overlay { position: absolute; } .overlay_0 { left: 0; top: 0; padding: .5rem; margin: 4px; background: #f4208f; }0 thông thường, tính năng bố cục này rất tiện lợi để đặt phần tử hộp hoặc phần tử .image_wrapper { position: relative; } img { display: block; object-fit: cover; width: 100%; height: auto; } .overlay { position: absolute; } .overlay_0 { left: 0; top: 0; padding: .5rem; margin: 4px; background: #f4208f; }0 khác lên trên hình ảnh dưới dạng lớp phủ Hãy xem một ví dụ nhanh. HTML sau đây có một hình ảnh và một số văn bản tiêu đề, cả hai đều nằm trong phần tử chứa .image_wrapper { position: relative; } img { display: block; object-fit: cover; width: 100%; height: auto; } .overlay { position: absolute; } .overlay_0 { left: 0; top: 0; padding: .5rem; margin: 4px; background: #f4208f; }7________số 8_______ Đương nhiên, mọi phần tử là một hộp được sắp xếp theo thứ tự chúng xuất hiện trong mã nguồn. Chẳng hạn, phần tử .image_wrapper { position: relative; } img { display: block; object-fit: cover; width: 100%; height: auto; } .overlay { position: absolute; } .overlay_0 { left: 0; top: 0; padding: .5rem; margin: 4px; background: #f4208f; }0 trong đoạn mã trên sẽ hiển thị trước văn bản tiêu đề Bây giờ, trong trường hợp chúng tôi muốn văn bản xuất hiện trên đầu hình ảnh, chúng tôi sẽ thay đổi hành vi mặc định của thành phần văn bản hoặc vùng chứa của nó bằng cách ghi đè luồng tài liệu thông thường của nó bằng cách sử dụng thuộc tính CSS .image_wrapper { position: relative; } img { display: block; object-fit: cover; width: 100%; height: auto; } .overlay { position: absolute; } .overlay_0 { left: 0; top: 0; padding: .5rem; margin: 4px; background: #f4208f; }9 như vậy .image_wrapper { position: relative; } .overlay { position: absolute; left: 0; top: 0; } Bằng cách thêm Image titleImage titleImage titleVới tính năng định vị này, chúng ta có thể bắt đầu triển khai lớp phủ hình ảnh Khám phá các hiệu ứng CSS lớp phủ hình ảnh khác nhau cho các phần tử .image_wrapper { position: relative; } img { display: block; object-fit: cover; width: 100%; height: auto; } .overlay { position: absolute; } .overlay_0 { left: 0; top: 0; padding: .5rem; margin: 4px; background: #f4208f; } 0Một điều chúng ta có thể thấy ở hình trên là chữ trên đó không thể đọc được và do đó, không tốt cho trải nghiệm của người dùng. Để cải thiện sự hài lòng của người dùng, chúng tôi sẽ thêm lớp phủ để đảm bảo văn bản có thể đọc được Bắt đầu từ phần tiếp theo, chúng ta sẽ tạo các lớp phủ hình ảnh khác nhau với nhiều hiệu ứng khác nhau. Bạn có thể xem dự án trên Codepen tại đây Xem các ví dụ về lớp phủ hình ảnh Pen CSS của Ibadehin Mojeed (@ibaslogic) Lớp phủ hình ảnh CSS đơn giản với màu nền văn bảnLớp phủ văn bản có thể đơn giản như thêm màu nền phía sau văn bản. Chúng ta hãy xem đánh dấu sau 10% OFFChúng ta có thể định vị văn bản trên hình ảnh giống như cách chúng ta đã làm trong ví dụ đầu tiên, sau đó thêm màu nền .image_wrapper { position: relative; } img { display: block; object-fit: cover; width: 100%; height: auto; } .overlay { position: absolute; } .overlay_0 { left: 0; top: 0; padding: .5rem; margin: 4px; background: #f4208f; } Đầu ra bây giờ trông như vậy Hiệu ứng lớp phủ này phổ biến trên các trang web thương mại điện tử dành cho nhãn quảng cáo và các mục đích sử dụng tương tự khác Lớp phủ văn bản tiêu đề trong mờ bao phủ một phần hình ảnhMột kiểu lớp phủ phổ biến khác có tiêu đề hoặc chú thích hình ảnh trên nền mờ. Xem xét đánh dấu sau Image titleVới các khai báo Image titleImage titleImage title.overlay { position: absolute; background: rgba(57, 57, 57, 0.5); /* center overlay text */ display: flex; align-items: center; justify-content: center; } .overlay_1 { left: 0; bottom: 0; width: 100%; padding: 1rem; } Chúng tôi cũng đã áp dụng nền bán trong suốt trên lớp phủ. Xem đầu ra bên dưới Để đảm bảo tính thẩm mỹ, chúng tôi cũng áp dụng thuộc tính flexbox để đặt chú thích hình ảnh ở giữa Các ví dụ trên là lý tưởng khi tập trung vào cả hình ảnh và văn bản lớp phủ. Tuy nhiên, khi tiêu điểm tập trung vào văn bản nhiều hơn hình ảnh, chúng tôi có thể kéo dài lớp phủ để bao phủ toàn bộ hình ảnh Lớp phủ mờ bao phủ toàn bộ hình ảnhXem xét đánh dấu sau Image titleTrên phần tử lớp phủ, chúng ta sẽ sử dụng các khai báo Image titleImage titleImage titleImage title.overlay_2 { top: 0; right: 0; left: 0; bottom: 0; } Chúng ta cũng có thể sử dụng một khai báo như một cách viết tắt để thay thế các quy tắc CSS ở trên .overlay_2 { inset: 0; } Giá trị được gán cho .overlay { position: absolute; background: rgba(57, 57, 57, 0.5); /* center overlay text */ display: flex; align-items: center; justify-content: center; } .overlay_1 { left: 0; bottom: 0; width: 100%; padding: 1rem; }1 sẽ được áp dụng cho tất cả các cạnh. Đầu ra bây giờ trông giống như vậy Hãy nhớ rằng, trong ví dụ trước, chúng tôi đã áp dụng thuộc tính flexbox trên lớp phủ để đặt văn bản ở giữa. Do lớp phủ mờ hiện bao phủ toàn bộ hình ảnh, nên văn bản cũng được căn giữa theo chiều dọc và chiều ngang trên toàn bộ hình ảnh Hiển thị hiệu ứng lớp phủ hình ảnh khi di chuột bằng CSSHãy tìm hiểu cách chỉ hiển thị lớp phủ khi người dùng di chuột qua hình ảnh. Chúng tôi cũng sẽ thêm các hiệu ứng trượt và thu phóng Lớp phủ hình ảnh hiển thị văn bản khi di chuột với hiệu ứng thu phóngĐối với ví dụ này, chúng tôi sẽ sử dụng đánh dấu HTML sau Image titleNgoài các khai báo kiểu lớp phủ thông thường, các quy tắc CSS sau cũng bao gồm các thuộc tính .overlay { position: absolute; background: rgba(57, 57, 57, 0.5); /* center overlay text */ display: flex; align-items: center; justify-content: center; } .overlay_1 { left: 0; bottom: 0; width: 100%; padding: 1rem; }2, .overlay { position: absolute; background: rgba(57, 57, 57, 0.5); /* center overlay text */ display: flex; align-items: center; justify-content: center; } .overlay_1 { left: 0; bottom: 0; width: 100%; padding: 1rem; }3 và .overlay { position: absolute; background: rgba(57, 57, 57, 0.5); /* center overlay text */ display: flex; align-items: center; justify-content: center; } .overlay_1 { left: 0; bottom: 0; width: 100%; padding: 1rem; }4 .image_wrapper { position: relative; } .overlay { position: absolute; left: 0; top: 0; }0 Thay đổi giá trị .overlay { position: absolute; background: rgba(57, 57, 57, 0.5); /* center overlay text */ display: flex; align-items: center; justify-content: center; } .overlay_1 { left: 0; bottom: 0; width: 100%; padding: 1rem; }5 từ .overlay { position: absolute; background: rgba(57, 57, 57, 0.5); /* center overlay text */ display: flex; align-items: center; justify-content: center; } .overlay_1 { left: 0; bottom: 0; width: 100%; padding: 1rem; }6 thành .overlay { position: absolute; background: rgba(57, 57, 57, 0.5); /* center overlay text */ display: flex; align-items: center; justify-content: center; } .overlay_1 { left: 0; bottom: 0; width: 100%; padding: 1rem; }7 khi di chuột cung cấp hiệu ứng hình ảnh của văn bản lớp phủ phóng to xem. Trong khi đó, .overlay { position: absolute; background: rgba(57, 57, 57, 0.5); /* center overlay text */ display: flex; align-items: center; justify-content: center; } .overlay_1 { left: 0; bottom: 0; width: 100%; padding: 1rem; }4 cho phép chúng tôi áp dụng hiệu ứng làm mờ phía sau lớp phủ để tăng khả năng hiển thị văn bản hơn nữa. Cuối cùng, .overlay { position: absolute; background: rgba(57, 57, 57, 0.5); /* center overlay text */ display: flex; align-items: center; justify-content: center; } .overlay_1 { left: 0; bottom: 0; width: 100%; padding: 1rem; }3 cung cấp hiệu ứng di chuột mượt mà GIF bên dưới thể hiện hiệu ứng thu phóng khi di chuột Lớp phủ hình ảnh hiển thị văn bản khi di chuột với hiệu ứng trượtChúng tôi đang sử dụng đánh dấu HTML sau đây cho ví dụ này .image_wrapper { position: relative; } .overlay { position: absolute; left: 0; top: 0; }1 Với quy tắc CSS bên dưới, các thuộc tính Image titleImage title.image_wrapper { position: relative; } .overlay { position: absolute; left: 0; top: 0; }2 GIF bên dưới thể hiện các hiệu ứng trượt khi di chuột Biểu tượng hiển thị lớp phủ hình ảnh khi di chuột với hiệu ứng thu phóngTương tự như lớp phủ văn bản, chúng ta cũng có thể có các biểu tượng xuất hiện trên hình ảnh của mình. Dưới đây, chúng tôi sẽ tạo một lớp phủ có biểu tượng Phông chữ tuyệt vời xuất hiện khi chúng tôi di chuột qua một hình ảnh Chúng tôi sẽ sử dụng đánh dấu HTML sau cho ví dụ này .image_wrapper { position: relative; } .overlay { position: absolute; left: 0; top: 0; }3 Trong tệp CSS, chúng tôi sẽ nhập Image title.image_wrapper { position: relative; } .overlay { position: absolute; left: 0; top: 0; }4 Như bạn có thể thấy, việc triển khai CSS cho lớp phủ biểu tượng tương tự như lớp phủ văn bản với hiệu ứng thu phóng. GIF bên dưới thể hiện các hiệu ứng thu phóng khi di chuột Hình ảnh trên hình ảnh được hiển thị khi di chuột với hiệu ứng thu phóngGiống như lớp phủ biểu tượng, chúng ta cũng có thể có một hình ảnh phù hợp xuất hiện trên một hình ảnh khác khi di chuột. Chúng tôi có thể tìm thấy trường hợp sử dụng cho việc triển khai này trên các trang web thương mại điện tử nơi hình ảnh sản phẩm có thể thay đổi được hiển thị khi chúng tôi di chuột qua một sản phẩm như vậy Chúng tôi sẽ sử dụng đánh dấu HTML sau cho ví dụ này .image_wrapper { position: relative; } .overlay { position: absolute; left: 0; top: 0; }5 Xem mã hoàn chỉnh trên Codepen Cách tiếp cận để tạo lớp phủ giống nhau bất kể chúng ta muốn lớp phủ văn bản, biểu tượng hay hình ảnh Hơn 200 nghìn nhà phát triển sử dụng LogRocket để tạo ra trải nghiệm kỹ thuật số tốt hơnTìm hiểu thêm →Trong phần đánh dấu HTML ở trên, chúng tôi đã thêm cả hai hình ảnh vào cùng một bộ chứa phần tử Image titleChúng tôi sẽ cung cấp cho container này một tài sản Image titleImage titleImage titleImage titleImage titleImage titleImage titleImage titleCác quy tắc kiểu CSS sẽ giống như vậy .image_wrapper { position: relative; } .overlay { position: absolute; left: 0; top: 0; }6 Sau khi định vị hình ảnh lớp phủ trên hình ảnh chính, chúng tôi đã thêm .overlay_2 { top: 0; right: 0; left: 0; bottom: 0; }2 để ẩn nó để nó chỉ hiển thị khi di chuột với .overlay_2 { top: 0; right: 0; left: 0; bottom: 0; }3. Áp dụng .overlay_2 { top: 0; right: 0; left: 0; bottom: 0; }4 khi di chuột cung cấp hiệu ứng trực quan của hình ảnh lớp phủ được phóng to xem. Trong khi đó, thuộc tính .overlay { position: absolute; background: rgba(57, 57, 57, 0.5); /* center overlay text */ display: flex; align-items: center; justify-content: center; } .overlay_1 { left: 0; bottom: 0; width: 100%; padding: 1rem; }3 cung cấp hiệu ứng di chuột mượt mà Lớp phủ hình nềnKhông giống như các phần tử .image_wrapper { position: relative; } img { display: block; object-fit: cover; width: 100%; height: auto; } .overlay { position: absolute; } .overlay_0 { left: 0; top: 0; padding: .5rem; margin: 4px; background: #f4208f; }0, một hình ảnh được đưa vào làm phần tử nền sẽ tự động hiển thị phía sau văn bản hoặc biểu tượng có chứa. Điều này giúp dễ dàng áp dụng các lớp phủ, như chúng ta sẽ thấy trong giây lát Chúng tôi sẽ tạo các lớp phủ hình nền khác nhau với các hiệu ứng khác nhau như áp dụng một gradient với hàm .overlay_2 { top: 0; right: 0; left: 0; bottom: 0; }7 CSS và trộn với các thuộc tính CSS .overlay_2 { top: 0; right: 0; left: 0; bottom: 0; }8 và .overlay_2 { top: 0; right: 0; left: 0; bottom: 0; }9. Chúng ta cũng sẽ tìm hiểu cách sử dụng phần tử giả để tạo lớp phủ nền đẹp Bạn có thể xem dự án trên Codepen Xem các ví dụ về lớp phủ hình nền Pen CSS của Ibadehin Mojeed (@ibaslogic) Hình nền với lớp phủ văn bản đơn giản bằng CSSChúng tôi sẽ bắt đầu với đánh dấu HTML sau cho ví dụ này .image_wrapper { position: relative; } .overlay { position: absolute; left: 0; top: 0; }7 Trên phần tử vùng chứa .overlay_2 { inset: 0; }0, chúng tôi sẽ thêm hình nền bằng CSS .image_wrapper { position: relative; } .overlay { position: absolute; left: 0; top: 0; }8 Kết quả sẽ giống như vậy Để đảm bảo tính thẩm mỹ, chúng tôi cũng đã áp dụng các thuộc tính lưới CSS để đặt nội dung hình ảnh ở trung tâm Như mong đợi, lớp phủ văn bản không dễ đọc Hãy thử cải thiện khả năng hiển thị của lớp phủ văn bản bằng cách áp dụng độ mờ thấp hơn cho phần tử nền, như vậy .image_wrapper { position: relative; } .overlay { position: absolute; left: 0; top: 0; }9 Việc bổ sung ở trên sẽ ảnh hưởng đến cả hình ảnh và lớp phủ văn bản chứa trong đó, điều này thậm chí còn tệ hơn Để kiểm soát độ mờ của hình ảnh mà không ảnh hưởng đến văn bản, hãy xem giải pháp sử dụng phần tử giả Sử dụng phần tử giả để kiểm soát độ mờ của hình nềnSử dụng phương pháp này, chúng tôi sẽ áp dụng hình nền trên phần tử giả để tách rời hình ảnh và nội dung văn bản 10% OFFVới thuộc tính .overlay { position: absolute; background: rgba(57, 57, 57, 0.5); /* center overlay text */ display: flex; align-items: center; justify-content: center; } .overlay_1 { left: 0; bottom: 0; width: 100%; padding: 1rem; }1, nền được đặt so với phần tử gốc và xuất hiện trên nội dung văn bản. Sau đó, chúng tôi áp dụng một .overlay_2 { inset: 0; }2 tiêu cực để thay đổi thứ tự xếp chồng và di chuyển hình nền phía sau văn bản Sau đó, với thuộc tính .overlay_2 { inset: 0; }3 trên phần tử giả, chúng ta có thể giảm độ tương phản của hình nền Bây giờ, như chúng ta có thể thấy trong hình ảnh, chúng ta đã tăng khả năng hiển thị của lớp phủ văn bản Sử dụng thuộc tính .overlay_2 { top: 0; right: 0; left: 0; bottom: 0; } 9Cách tiếp cận phần tử giả được sử dụng ở trên có thể hơi phức tạp. Với thuộc tính CSS .overlay_2 { top: 0; right: 0; left: 0; bottom: 0; }9, chúng ta có thể áp dụng lớp phủ trên hình nền bằng một dòng mã nhỏ. Thuộc tính này sẽ trộn hình nền với màu nền của phần tử Chúng tôi sẽ sử dụng đánh dấu HTML sau cho ví dụ này 10% OFFSau đó, chỉ định chế độ hòa trộn của hình nền của chúng ta là .overlay_2 { inset: 0; }6 10% OFFKết quả bây giờ sẽ giống như vậy Hiệu ứng lớp phủ, như đã thấy ở trên, là do pha trộn hình nền với màu nền của phần tử Sử dụng hàm CSS .overlay_2 { top: 0; right: 0; left: 0; bottom: 0; } 7Với chức năng CSS .overlay_2 { top: 0; right: 0; left: 0; bottom: 0; }7, chúng ta có thể đạt được lớp phủ nền chỉ bằng một dòng mã. Nó rất đơn giản để thực hiện và, giống như cách tiếp cận chế độ hòa trộn, loại bỏ nhu cầu sử dụng bộ chọn giả Chúng tôi sẽ sử dụng đánh dấu HTML sau cho ví dụ này 10% OFFSau đó, chúng tôi sẽ thêm một gradient tuyến tính trên hình nền cùng với URL nền 10% OFFKết quả sẽ giống như vậy Với linear-gradient, chúng tôi đã dần dần chuyển đổi giữa hai màu bán trong suốt để đạt được hiệu ứng lớp phủ gradient Sử dụng thuộc tính CSS .overlay_2 { inset: 0; } 9Giống như thuộc tính .overlay_2 { top: 0; right: 0; left: 0; bottom: 0; }9, .overlay_2 { inset: 0; }9 cho phép chúng tôi trộn nội dung của phần tử với nền gốc của nó Hãy xem xét đánh dấu sau 10% OFFVới CSS sau đây, chúng tôi đã thêm một hình nền trên phần tử vùng chứa phần và cũng áp dụng bộ chọn giả để chồng lên lớp phủ màu nền 10% OFFNếu chúng ta nhìn vào kết quả, chúng ta sẽ có một cái gì đó như sau Với Image titleNếu chúng ta tạm thời loại bỏ hình nền, chúng ta sẽ thấy màu nền 10% OFFKết quả của việc loại bỏ hình nền Để đảm bảo màu nền nằm phía sau văn bản chứ không phải hình nền gốc, chúng ta sẽ sử dụng thuộc tính CSS Image titleHãy trả về hình nền và thêm thuộc tính Image title10% OFFTại thời điểm này, hình nền hiện nằm sau màu nền Bây giờ, chúng ta có thể áp dụng .overlay_2 { inset: 0; }9 trên bộ chọn giả để pha trộn màu nền với hình nền gốc của nó 10% OFFKết quả bây giờ sẽ giống như vậy Bây giờ chúng ta có một lớp phủ hình nền đẹp, nơi văn bản có thể đọc được Phần kết luậnTạo lớp phủ hình ảnh rất hữu ích trong các thiết kế và tình huống khác nhau. Nó rất hữu ích khi tạo phần anh hùng của trang web, thư viện hình ảnh phản hồi và nhiều trường hợp sử dụng khác Hướng dẫn này thảo luận về cách tạo lớp phủ đẹp mắt trên hình nền và các phần tử .image_wrapper { position: relative; } img { display: block; object-fit: cover; width: 100%; height: auto; } .overlay { position: absolute; } .overlay_0 { left: 0; top: 0; padding: .5rem; margin: 4px; background: #f4208f; }0 thông thường trong CSS. Nếu bạn thích bài học này, hãy chia sẻ nó trên web. Cuối cùng, chúng tôi rất muốn biết giải pháp lớp phủ nào là yêu thích của bạn. Cho chúng tôi biết trong phần bình luận Giao diện người dùng của bạn có ngốn CPU của người dùng không?Khi giao diện người dùng web ngày càng phức tạp, các tính năng ngốn tài nguyên ngày càng đòi hỏi nhiều hơn từ trình duyệt. Nếu bạn quan tâm đến việc giám sát và theo dõi mức sử dụng CPU phía máy khách, mức sử dụng bộ nhớ, v.v. cho tất cả người dùng của bạn trong sản xuất, hãy thử LogRocket. https. // tên lửa. com/đăng ký/LogRocket giống như một DVR dành cho ứng dụng web và thiết bị di động, ghi lại mọi thứ xảy ra trong ứng dụng web hoặc trang web của bạn. Thay vì đoán lý do tại sao sự cố xảy ra, bạn có thể tổng hợp và báo cáo về các chỉ số hiệu suất chính của giao diện người dùng, phát lại các phiên của người dùng cùng với trạng thái ứng dụng, ghi nhật ký yêu cầu mạng và tự động hiển thị tất cả các lỗi |