Lớp phủ hình ảnh là kỹ thuật thêm văn bản hoặc hình ảnh lên một hình ảnh cơ sở khác. Một trong những cách đơn giản nhất để thêm lớp phủ hình ảnh hoặc văn bản là sử dụng các thuộc tính CSS và phần tử giả.

Nói tóm lại, hiệu ứng lớp phủ CSS đạt được bằng cách sử dụng các cách sau:

• Thuộc tính CSS background-image và background để thêm hình ảnh và hiệu ứng lớp phủ chuyển tiếp tuyến tính.
• position: tuyệt đối , < code> top , bottom , right , left Thuộc tính CSS để kiểm soát vị trí của hình ảnh hoặc văn bản lớp phủ.
• :: after và :: before Phần tử giả CSS cùng với thuộc tính CSS content để kiểm soát nội dung trong trường hợp có lớp phủ văn bản.

Đây là một ví dụ tuyệt vời về hiệu ứng lớp phủ từ trang web Airbnb.

Ví dụ về lớp phủ văn bản từ Airbnb.

Trong ví dụ trên, hai đoạn văn bản ( Những hoạt động ngoài trời tuyệt vời nhất và Danh sách yêu thích do Airbnb quản lý ) và một CTA ( Lấy cảm hứng ) đã được thêm vào trên cùng của hình ảnh cơ sở.

Trong bài đăng này, chúng tôi sẽ tìm hiểu cách tạo các hiệu ứng lớp phủ hình ảnh tương tự.

Có hai loại lớp phủ:

1. Lớp phủ hình ảnh – Thêm hình ảnh lên một hình ảnh, ví dụ: hình ảnh có hình mờ ở nơi bạn nhìn thấy biểu trưng ở trên cùng của hình ảnh.
2. Lớp phủ văn bản – Thêm văn bản lên hình ảnh, ví dụ: hình ảnh anh hùng, biểu ngữ tiếp thị như ví dụ trên Airbnb.

Cụ thể hơn, chúng ta sẽ nói về hai kỹ thuật để tạo lớp phủ hình ảnh:

1. Lớp phủ văn bản và hình ảnh bằng cách sử dụng CSS

   Chúng tôi sẽ đề cập đến các ví dụ và mã về cách để thêm lớp phủ văn bản và lớp phủ hình ảnh bằng cách sử dụng CSS. Bạn có thể sử dụng các kỹ thuật này trên trang web của mình bằng cách sao chép-dán các đoạn mã được cung cấp trong bài đăng này.

   ? Phương pháp này dễ hiểu và dễ sử dụng.

   ? Nếu người dùng tải xuống hình ảnh, họ sẽ không thấy các hiệu ứng lớp phủ.

   ? Bạn sẽ phải viết mã riêng cho các ứng dụng máy tính để bàn, điện thoại di động, iOS và Android.

   Liên kết nhanh:
   → Ví dụ về lớp phủ văn bản
   → < span> Ví dụ về lớp phủ hình ảnh

2. (Được đề xuất) Lớp phủ văn bản, lớp phủ hình ảnh và hiệu ứng hình ảnh bằng ImageKit.io
   
   Ở đây chúng ta sẽ nói về cách đơn giản hóa việc tạo lớp phủ văn bản và hình ảnh. Chúng tôi sẽ tạo hiệu ứng hình ảnh chỉ bằng cách thay đổi các tham số URL, tức là src của hình ảnh.

   Điều này sẽ cho phép bạn sử dụng cùng một hình ảnh trên các ứng dụng máy tính để bàn, thiết bị di động, iOS và Android. Bạn sẽ không phải viết thêm mã hoặc đánh dấu để đạt được hiệu ứng lớp phủ trong các nền tảng khác nhau.

   ? Hình ảnh được tạo trước được hiển thị nhanh chóng ở phía máy khách.

   ? URL hình ảnh tương tự hoạt động trên ứng dụng di động, máy tính để bàn, iOS và Android.

   ? Không mạnh bằng CSS và HTML gốc nhưng tốt cho 90% trường hợp sử dụng.

   Liên kết nhanh:
   → Lớp phủ văn bản đơn giản bằng ImageKit.io
   → Nhãn hình ảnh sản phẩm thương mại điện tử
   → Hình ảnh mờ
   → Biểu ngữ tiếp thị động

Hiệu ứng lớp phủ văn bản sử dụng CSS


Lớp phủ văn bản sử dụng phần tử div vani

Chúng tôi sẽ thêm văn bản lên trên hình ảnh cơ sở sau:

https://ik.imagekit.io /ikmedia/accessories_banner.jpg?tr=w-1200,h-400

Hình cơ sở

tr = w-1200, h-400 được sử dụng để thay đổi kích thước hình ảnh cho ví dụ này bằng ImageKit.io.

Chúng tôi sẽ thêm văn bản vào phần tử div với lớp overlay . Điều này rất hữu ích nếu văn bản là động và đến từ phần phụ trợ như một phần của HTML ban đầu.

HTML sẽ giống như sau:

  & lt; div class = "ví dụ" & gt;
  & lt; img class = "background-image" src = "https://ik.imagekit.io/ikmedia/accessories_banner.jpg?tr=w-1200,h-400" & gt;
  & lt; div class = "overlay" & gt;
    Văn bản & lt; br / & gt; nhiều dòng
  & lt; / div & gt;
& lt; / div & gt;  

Chúng tôi muốn văn bản này được đặt trên đầu hình ảnh. Hãy đặt positive: tuyệt đối cho div với tên lớp overlay . Và sử dụng thuộc tính CSS top và right để kiểm soát vị trí của văn bản lớp phủ này so với hình nền. CSS cuối cùng trông giống như sau:

. example img {
  chiều rộng: 100%;
  chức vụ: thân nhân;
}

.example .overlay {
  vị trí: tuyệt đối;
  đầu trang: 80px;
  bên phải: 15px;
  font-weight: bold;
  text-align: phải;
  font-size: 30px;
}  

Kết quả cuối cùng:

Lớp phủ văn bản sử dụng phần tử giả CSS

Chúng tôi cũng có thể sử dụng :: after hoặc :: before phần tử giả CSS thay vì tạo mới phần tử div . Điều này có nghĩa là tất cả văn bản sẽ chỉ được lưu trữ trong CSS. Giải pháp này hữu ích nếu bạn muốn phủ một tập hợp nhãn cố định ở nhiều vị trí trên trang web.

Lớp phủ hình ảnh hiệu ứng bằng cách sử dụng CSS

Giống như chúng tôi đã thêm văn bản lên trên hình ảnh, chúng tôi cũng có thể thêm hình ảnh lên các hình ảnh khác bằng cách sử dụng các thuộc tính CSS gốc.

Hiệu ứng lớp phủ gradient hình ảnh

Hiệu ứng lớp phủ gradient là một trong những hiệu ứng lớp phủ thường được sử dụng mà bạn sẽ thấy trên các trang đích.

Hãy tạo phần chính của một trang đích sử dụng hình ảnh anh hùng sau đây làm nền.

https://ik.imagekit.io/ikmedia/blog/hero-image.jpeg

Hình ảnh anh hùng mẫu

HTML trông giống như sau:

  & lt; header & gt;
    & lt; section class = 'hero-header' & gt;
        & lt; h1 & gt; Danh hiệu anh hùng & lt; / h1 & gt;
        & lt; h2 & gt; Một trang đích khác & lt; / h2 & gt;
        & lt; nút & gt; Đăng ký & lt; / nút & gt;
    & lt; / phần & gt;
& lt; / header & gt;  

Chúng tôi sẽ sử dụng thuộc tính CSS background để tạo hiệu ứng lớp phủ gradient tuyến tính trên hình ảnh.

  tiêu đề {
    chiều cao: 400px;
    chiều rộng: 100%;
    text-align: center;
    padding-top: 100px;
    màu trắng;
    tràn: ẩn;
    nền: # C04848; / * dự phòng cho các trình duyệt cũ * /
    background: linear-gradient (rgb (72,0,72,0.8), rgb (192,72,72,0.8)), url ("https://ik.imagekit.io/ikmedia/blog/hero-image. jpeg "); / * Chrome 10-25, Safari 5.1-6 * /
    background: linear-gradient (rgb (72,0,72,0.8), rgb (192,72,72,0.8)), url ("https://ik.imagekit.io/ikmedia/blog/hero-image. jpeg "); / * W3C, IE 10 + / Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ * /
    background-size: bìa;
    background-repeat: không lặp lại;
}  

Điều này sẽ tạo hiệu ứng lớp phủ chuyển màu đẹp mắt mà bạn có thể sử dụng trên các trang đích của mình.

Nếu bạn đang tìm kiếm hiệu ứng hình ảnh tuyệt vời hơn, hãy xem hướng dẫn của chúng tôi về Hiệu ứng hình ảnh CSS để hoàn thiện hình ảnh của bạn!

Nhược điểm của lớp phủ hình ảnh CSS bằng CSS

Mặc dù việc tạo hiệu ứng lớp phủ hình ảnh và văn bản bằng CSS gốc khá dễ dàng, nhưng nó có một số nhược điểm.

• Nếu người dùng tiết kiệm hoặc mở hình ảnh trong một tab mới, họ sẽ không nhìn thấy văn bản hoặc hình ảnh mà bạn đã thêm bằng CSS.
• Bạn sẽ phải viết thêm đánh dấu để tạo ra những hiệu ứng này.
• Mã giống nhau sẽ không hoạt động cho iOS và Android.

Để khắc phục những sự cố này, bạn có thể tạo lớp phủ văn bản và hình ảnh bằng cách sử dụng hình ảnh CDN như ImageKit. io.

Overlay bằng ImageKit.io

ImageKit.io là một CDN hình ảnh cho phép bạn thay đổi kích thước, cắt , xoay, thay đổi định dạng hình ảnh, thêm văn bản và lớp phủ hình ảnh bằng cách sử dụng các tham số URL. Nó cũng đảm nhận việc tối ưu hóa hình ảnh và phân phát nội dung bằng cách sử dụng CDN toàn cầu.

Bạn sẽ cần tài khoản ImageKit.io để tạo lớp phủ văn bản và hình ảnh. Tạo tài khoản miễn phí trên ImageKit.io nếu bạn chưa có. ImageKit.io cung cấp gói miễn phí hào phóng, mang đến cho bạn băng thông lên tới 20GB, hoàn toàn MIỄN PHÍ hàng tháng!

Hãy đi sâu vào một số ví dụ.

Lớp phủ văn bản đơn giản bằng ImageKit.io

URL hình ảnh gốc:
https: //ik.imagekit .io / demo / medium_cafe_B1iTdD0C.jpg

Bây giờ,

• Hãy thêm văn bản lớp phủ dễ dàng với cỡ chữ 45px và màu đen # 000000 . Chúng tôi sẽ sử dụng tham số ot-overlays made easy, ots-45, otc-000000 trong URL.
• Với nền trắng trong suốt, tức là # FFFFFF80 . Chúng tôi sẽ thêm thông số otbg-FFFFF80 vào URL.
• Với phần đệm 40px sử dụng tham số otp-40 . < / li>

URL cuối cùng trở thành:
https://ik.imagekit.io/demo/medium_cafe_B1iTdD0C.jpg?tr=ot-overlays thật dễ dàng, ots -45, otc-000000, otbg-FFFFFF80, otp-40

Hình ảnh kết quả:

Trong blog này, chúng tôi sẽ đề cập đến một vài ví dụ. Nhưng bạn có thể tìm hiểu về tất cả các thông số từ tài liệu về lớp phủ văn bản .

E-commerce use-case

< p>
Bạn sẽ thường thấy các nhãn thông tin hoặc khuyến mại cụ thể trên hình ảnh sản phẩm trên một trang web thương mại điện tử như thế này.

Mẫu danh sách sản phẩm thương mại điện tử

Với lớp phủ văn bản ImageKit, thật dễ dàng tạo những hình ảnh như vậy.

Ví dụ: URL của hình ảnh sản phẩm là:
https://ik.imagekit.io/ikmedia/hoodie_white.png < / span>

Bây giờ, chúng tôi muốn thêm nhãn GIẢM GIÁ 15% với nền màu đồng nhất.

URL cuối cùng trở thành:
https://ik.imagekit.io/ikmedia/hoodie_white.png?tr=w-394,h-540,ot-15% TẮT, otc-FFFFFF, otbg-EF6823 hoặc-4, otp-8_8 , ox-10, oy-10, ott-bold, ots-30

Bạn có thể sử dụng URL này trong các ứng dụng di động, máy tính để bàn, iOS và Android và kết quả sẽ giống nhau .

Hãy tìm hiểu từng phần khác nhau của URL này:

• w-394, h-540 về cơ bản là thay đổi kích thước hình ảnh thành Kích thước 394x540 .
• ot-15% OFF đang thêm văn bản 15% OFF trên hình ảnh.

otc-FFFFFF đang đặt màu của lớp phủ văn bản thành màu trắng.

• otbg-EF6823 đang đặt màu nền thành # EF6823 < /code>. < code> otp-8_8 dùng để đặt phần đệm trên cùng bên trái và bên trái thành 8px .
• ox và oy được sử dụng để kiểm soát vị trí của lớp phủ văn bản so với hình nền.
• ott và ots được sử dụng để kiểm soát kiểu chữ và kích thước.

Hình ảnh kết quả:

Hình mờ hình ảnh

Giả sử URL hình ảnh cơ sở là – https://ik.imagekit.io/demo/medium_cafe_B1iTdD0C.jpg

URL của biểu trưng hình ảnh lớp phủ là:
https://ik.imagekit.io/demo/logo-white_SJwqB4Nfe. png

Bây giờ để o phủ biểu trưng này lên hình ảnh cơ sở, chúng tôi sẽ chuyển đường dẫn của hình ảnh lớp phủ trong tham số oi , tức là logo-white_SJwqB4Nfe.png .

URL cuối cùng: < br /> https://ik.imagekit.io/demo/medium_cafe_B1iTdD0C.jpg?tr=oi-logo-white_SJwqB4Nfe.png

Bạn cũng có thể kiểm soát vị trí, chiều rộng và các thuộc tính khác của hình ảnh lớp phủ, tất cả đều sử dụng tham số URL. Tìm hiểu thêm từ tài liệu về lớp phủ hình ảnh .

Để kiểm soát vị trí của hình ảnh lớp phủ so với hình nền, chúng tôi có thể sử dụng thông số ofo . Tham số ofo chấp nhận các giá trị vị trí tương đối, tức là top , right , bottom , left , v.v.

Vị trí hàng đầu:
https://ik.imagekit.io/demo/medium_cafe_B1iTdD0C.jpg?tr=oi-logo-white_SJwqB4Nfe.png,ofo-top

Biểu ngữ tiếp thị động

Bạn có thể sử dụng kết hợp hình mờ hình ảnh và lớp phủ văn bản để tạo biểu ngữ được cá nhân hóa không thể cưỡng lại cho người dùng.

Ví dụ 1:
https: // ik.imagekit.io/ikmedia/accessories_banner.jpg?tr=w-1200,h-400:obg-F8F8F6,oh-176,ow-234,or-88,ox-753,oy-165:otf-PlayfairDisplay- Bold.ttf, ot-HI JOHN ,, otc-0450D5, ots-24, ox-850, oy-120: otf-PlayfairDisplay-Bold.ttf, ot-EPIC FASHION, ots-36, ox-850, oy-158 : otf-PlayfairDisplay-Bold.ttf, ot-SALE, ots-104, ox-850, oy-190: otf-PlayfairDisplay-Bold.ttf, ot-2 DAYS TO GO, ots-38, ox-850, oy- 294

Ví dụ 2: < br /> https://ik.imagekit.io/ikmedia/white-canvas.png?tr=w-1000,h-667:oi-site_graphics/girl_in_white_500.jpg,ow-500,oh -667, ox-0, oy-0: oi-site_graphics / guy_in_yellow_500.jpg, ow-500, oh-667, ox-500, oy-0: ot-HI% 20JOHN% E2% 80% 9A% 20HERE% 20ARE % 20SOME% 20RECOMMENDED% 20PRODUCTS% 20FOR% 20YOU, otbg-FFFFFF80, otp-20, ots-30, otc-000000, ott-b, or-16, ox-15, oy-550

Ghép ảnh

Bạn có thể kết hợp nhiều ảnh với nhau và tạo ảnh ghép động đẹp mắt.

Ví dụ:
https://ik.imagekit.io/ikmedia/white-canvas.png?tr=w-1245,h-1245 : oi-women-dress-1.jpg, ox-0, oy-0, ow-600, oh-600, oib-15_FFFFFF: oi-women-dress-2.jpg, ox-615, oy-0, ow -600, oh-600, oib-15_FFFFFF: oi-women-dress-3.jpg, ox-0, oy-615, ow-600, oh-600, oib-15_FFFFFF: oi-women-dress-4.jpg , ox-615, oy-615, ow-600, oh-600, oib-15_FFFFFF: ot-Women% 27s% 20Clothing, otbg-00000080, otp-20, ots-60, otc-FFFFFF: b-2_000000

Bạn có thể xem cách cr bổ sung hướng dẫn ghép ảnh để tìm hiểu thêm.

Tóm tắt

• Dễ dàng tạo lớp phủ hình ảnh và văn bản bằng CSS gốc. Bạn có thể sao chép và dán mã từ các ví dụ trên và bắt đầu sử dụng chúng ngay lập tức.
• Mặc dù CSS mạnh mẽ nhưng việc tạo hiệu ứng lớp phủ bằng CSS có một số hạn chế, ví dụ: cùng một mã không hoạt động cho tất cả các thiết bị và nếu người dùng tải xuống hình ảnh, hiệu ứng lớp phủ sẽ bị mất.
• Việc sử dụng CDN Hình ảnh như ImageKit.io sẽ đơn giản hóa việc tạo lớp phủ hình ảnh và văn bản.
• Bạn có thể tạo tài khoản miễn phí và bắt đầu tạo hình ảnh đẹp một cách linh hoạt bằng cách sử dụng tham số URL.
• Thiết lập ImageKit chỉ mất vài phút. Bạn có thể tích hợp bộ nhớ hiện có của mình hoặc bất kỳ máy chủ web nào bằng một vài cú nhấp chuột.