Tìm hiểu các kỹ thuật lớp phủ Hình ảnh CSS với các ví dụ. Hiểu cách khắc phục nhược điểm với ImageKit trong hướng dẫn này.

Bạn đang xem : lớp phủ css hình ảnh trên hình ảnh

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 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 :: 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 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 viết 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

  3. 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 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 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 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 tạo một 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.


Xem thêm những thông tin liên quan đến chủ đề hình ảnh lớp phủ css trên hình ảnh

Hiệu ứng hover ảnh hover effects bằng Html và Css

alt

  • Tác giả: FrontendNguyento
  • Ngày đăng: 2020-09-03
  • Đánh giá: 4 ⭐ ( 7101 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tạo Hiệu ứng hover ảnh hover effects bằng Html và Css

Các thuộc tính của thẻ IMG trong CSS

  • Tác giả: laptrinhtudau.com
  • Đánh giá: 3 ⭐ ( 5344 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Làm tròn hình ảnh trong CSS,Khung của hình ảnh trong CSS, Hình ảnh đáp ứng trong CSS, Căn giữa văn hình ảnh trong CSS,Polaroid Images / Cards trong CSS, Làm mờ hình ảnh trong CSS ,Văn bản nằm trong hình ảnh trong CSS,Bộ lọc hình ảnh trong CSS, Lớp phủ di chuột qua hình ảnh trong CSS, Lật hình ảnh trong CSS,Thư viện hình ảnh đáp ứng trong CSS, Phương thức hình ảnh năng cao trong CSS

10 thư viện CSS cung cấp những hiệu ứng chuyển động hình ảnh tốt nhất

  • Tác giả: blog.webico.vn
  • Đánh giá: 5 ⭐ ( 9076 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ngày nay khi thiết kế website, các nhà thiết kế web thường quan tâm đến những hiệu ứng độc đáo, ấn tượng để có thể thu hút được người dùng truy cập và click vào trang web của bạn. Ngày nay với CSS, có rất nhiều cách khác nhau để cung cấp hiệu ứng chuyển động, […]

Tạo Hiệu Ứng Hình Ảnh Khi Hover

  • Tác giả: www.niemvuilaptrinh.com
  • Đánh giá: 3 ⭐ ( 6383 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Xin chào các bạn quay lại blog của mình. Để các bạn có thể ôn lại và thực hành những gì mình đã học thì hãy cùng mình tạo hiệu ứng hover ảnh bằng HTML và CSS. Để hiểu rõ hơn các bạn cùng mình tìm hiểu nhé!

12 thư viện CSS cho hiệu ứng rê chuột qua hình ảnh đẹp mắt

  • Tác giả: nhatphuc.com
  • Đánh giá: 3 ⭐ ( 7830 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Để người dùng biết dễ dàng và rõ ràng phần nào của trang web có thể nhấp được là một phần quan trọng của thiết kế UX.

html — Làm cách nào để tạo CSS trong lớp phủ trên hình ảnh?

  • Tác giả: www.it-mot-dan-vi.com
  • Đánh giá: 4 ⭐ ( 2980 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi đang cố gắng để đạt được một cái gì đó như thế này:Khi tôi di chuột qua một hình ảnh, tôi muốn đưa vào hình ảnh đó màu tối này với một số văn bản và biểu tượng.Tôi bị kẹt ở đ...

Cách tạo lớp phủ trên hình ảnh với Divi Builder

  • Tác giả: codewatchers.com
  • Đánh giá: 3 ⭐ ( 4740 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Lớp phủ hình ảnh là một trong những cách tuyệt vời để thu hút khách truy cập bằng cách hiển thị thông tin bổ sung cho khách truy cập của bạn. Thông thường, điều này xảy ra khi chuột di chuột qua một...

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Nơi đào tạo kỹ sư dầu khí và kỹ sư địa chất hàng đầu Việt Nam - chuong trinh dao tao hcmut

By ads_php