Lớp phủ màu đen trên CSS hình ảnh

Lớp phủ hình ảnh là kỹ thuật thêm văn bản hoặc hình ảnh trê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 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 như sau

• Các thuộc tính CSS của

  .example img {
    width: 100%;
    position: relative;
  }
  
  .example .overlay {
    position: absolute;
    top: 80px;
    right: 15px;
    font-weight: bold;
    text-align: right;
    font-size: 30px;
  }

  3 và

  .example img {
    width: 100%;
    position: relative;
  }
  
  .example .overlay {
    position: absolute;
    top: 80px;
    right: 15px;
    font-weight: bold;
    text-align: right;
    font-size: 30px;
  }

  4 để thêm hiệu ứng lớp phủ chuyển màu tuyến tính và hình ảnh
• Các thuộc tính CSS

  .example img {
    width: 100%;
    position: relative;
  }
  
  .example .overlay {
    position: absolute;
    top: 80px;
    right: 15px;
    font-weight: bold;
    text-align: right;
    font-size: 30px;
  }

  5,

  .example img {
    width: 100%;
    position: relative;
  }
  
  .example .overlay {
    position: absolute;
    top: 80px;
    right: 15px;
    font-weight: bold;
    text-align: right;
    font-size: 30px;
  }

  6,

  .example img {
    width: 100%;
    position: relative;
  }
  
  .example .overlay {
    position: absolute;
    top: 80px;
    right: 15px;
    font-weight: bold;
    text-align: right;
    font-size: 30px;
  }

  7,

  .example img {
    width: 100%;
    position: relative;
  }
  
  .example .overlay {
    position: absolute;
    top: 80px;
    right: 15px;
    font-weight: bold;
    text-align: right;
    font-size: 30px;
  }

  8,

  .example img {
    width: 100%;
    position: relative;
  }
  
  .example .overlay {
    position: absolute;
    top: 80px;
    right: 15px;
    font-weight: bold;
    text-align: right;
    font-size: 30px;
  }

  0 để kiểm soát vị trí của hình ảnh hoặc văn bản lớp phủ
• Các phần tử giả CSS

  .example img {
    width: 100%;
    position: relative;
  }
  
  .example .overlay {
    position: absolute;
    top: 80px;
    right: 15px;
    font-weight: bold;
    text-align: right;
    font-size: 30px;
  }

  1 và

  .example img {
    width: 100%;
    position: relative;
  }
  
  .example .overlay {
    position: absolute;
    top: 80px;
    right: 15px;
    font-weight: bold;
    text-align: right;
    font-size: 30px;
  }

  2 cùng với thuộc tính CSS

  .example img {
    width: 100%;
    position: relative;
  }
  
  .example .overlay {
    position: absolute;
    top: 80px;
    right: 15px;
    font-weight: bold;
    text-align: right;
    font-size: 30px;
  }

  3 để kiểm soát nội dung trong trường hợp 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 (

.example img {
  width: 100%;
  position: relative;
}

.example .overlay {
  position: absolute;
  top: 80px;
  right: 15px;
  font-weight: bold;
  text-align: right;
  font-size: 30px;
}

4 và

.example img {
  width: 100%;
  position: relative;
}

.example .overlay {
  position: absolute;
  top: 80px;
  right: 15px;
  font-weight: bold;
  text-align: right;
  font-size: 30px;
}

5) và một CTA (

.example img {
  width: 100%;
  position: relative;
}

.example .overlay {
  position: absolute;
  top: 80px;
  right: 15px;
  font-weight: bold;
  text-align: right;
  font-size: 30px;
}

6) đã được thêm vào trên cùng của một hình ảnh cơ sở

Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo 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 trên một hình ảnh, đ. g. , hình ảnh có hình chìm mờ trong đó 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 trên một hình ảnh, e. g. , hình ảnh anh hùng, biểu ngữ tiếp thị như ví dụ trên về Airbnb

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

1. Lớp phủ văn bản và hình ảnh bằng CSS
   
   Chúng tôi sẽ trình bày 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 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 các đoạn mã được cung cấp trong bài đăng này.
   
   ? .
   
   ? .
   
   ? .
   
   Liên kết nhanh.
   → Ví dụ về lớp phủ văn bản
   → Ví dụ về lớp phủ hình ảnh
   
   
2. (Được khuyến nghị) 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ôi. e. ,

   .example img {
     width: 100%;
     position: relative;
   }
   
   .example .overlay {
     position: absolute;
     top: 80px;
     right: 15px;
     font-weight: bold;
     text-align: right;
     font-size: 30px;
   }

   7 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 dành cho 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 đánh dấu hoặc mã để đạt được hiệu ứng lớp phủ trong các nền tảng khác nhau.
   
   ? .
   
   ? .
   
   ? .
   
   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 thủy ấn
   → Biểu ngữ tiếp thị động

Hiệu ứng lớp phủ văn bản bằng CSS

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

Chúng tôi sẽ thêm một văn bản trên đầu hình ảnh cơ sở sau đây

.example img {
  width: 100%;
  position: relative;
}

.example .overlay {
  position: absolute;
  top: 80px;
  right: 15px;
  font-weight: bold;
  text-align: right;
  font-size: 30px;
}

8

hình ảnh cơ sở

.example img {
  width: 100%;
  position: relative;
}

.example .overlay {
  position: absolute;
  top: 80px;
  right: 15px;
  font-weight: bold;
  text-align: right;
  font-size: 30px;
}

9 đượ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 một văn bản trong phần tử

.example img {
  width: 100%;
  position: relative;
}

.example .overlay {
  position: absolute;
  top: 80px;
  right: 15px;
  font-weight: bold;
  text-align: right;
  font-size: 30px;
}

00 với lớp

.example img {
  width: 100%;
  position: relative;
}

.example .overlay {
  position: absolute;
  top: 80px;
  right: 15px;
  font-weight: bold;
  text-align: right;
  font-size: 30px;
}

01. Điều này hữu ích nếu văn bản động và đến từ phần phụ trợ như một phần của HTML ban đầu

HTML sẽ trông giống như

.example img {
  width: 100%;
  position: relative;
}

.example .overlay {
  position: absolute;
  top: 80px;
  right: 15px;
  font-weight: bold;
  text-align: right;
  font-size: 30px;
}

2

Chúng tôi muốn văn bản này được đặt trên đầu trang của hình ảnh. Hãy đặt

.example img {
  width: 100%;
  position: relative;
}

.example .overlay {
  position: absolute;
  top: 80px;
  right: 15px;
  font-weight: bold;
  text-align: right;
  font-size: 30px;
}

02 cho div với tên lớp

.example img {
  width: 100%;
  position: relative;
}

.example .overlay {
  position: absolute;
  top: 80px;
  right: 15px;
  font-weight: bold;
  text-align: right;
  font-size: 30px;
}

01. Và sử dụng thuộc tính CSS

.example img {
  width: 100%;
  position: relative;
}

.example .overlay {
  position: absolute;
  top: 80px;
  right: 15px;
  font-weight: bold;
  text-align: right;
  font-size: 30px;
}

6 và

.example img {
  width: 100%;
  position: relative;
}

.example .overlay {
  position: absolute;
  top: 80px;
  right: 15px;
  font-weight: bold;
  text-align: right;
  font-size: 30px;
}

8 để 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 như thế này

.example img {
  width: 100%;
  position: relative;
}

.example .overlay {
  position: absolute;
  top: 80px;
  right: 15px;
  font-weight: bold;
  text-align: right;
  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 ta cũng có thể sử dụng phần tử giả CSS

.example img {
  width: 100%;
  position: relative;
}

.example .overlay {
  position: absolute;
  top: 80px;
  right: 15px;
  font-weight: bold;
  text-align: right;
  font-size: 30px;
}

1 hoặc

.example img {
  width: 100%;
  position: relative;
}

.example .overlay {
  position: absolute;
  top: 80px;
  right: 15px;
  font-weight: bold;
  text-align: right;
  font-size: 30px;
}

2 thay vì tạo phần tử

.example img {
  width: 100%;
  position: relative;
}

.example .overlay {
  position: absolute;
  top: 80px;
  right: 15px;
  font-weight: bold;
  text-align: right;
  font-size: 30px;
}

00 mới. Đ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 bộ nhãn cố định ở nhiều vị trí trên trang web

Hiệu ứng lớp phủ hình ảnh bằ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 trê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ủ chuyển màu 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 anh hùng của trang đích bằng hình ảnh anh hùng sau đây làm nền

.example img {
  width: 100%;
  position: relative;
}

.example .overlay {
  position: absolute;
  top: 80px;
  right: 15px;
  font-weight: bold;
  text-align: right;
  font-size: 30px;
}

09

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

HTML trông giống như

.example img {
  width: 100%;
  position: relative;
}

.example .overlay {
  position: absolute;
  top: 80px;
  right: 15px;
  font-weight: bold;
  text-align: right;
  font-size: 30px;
}

0

Chúng tôi sẽ sử dụng thuộc tính CSS

.example img {
  width: 100%;
  position: relative;
}

.example .overlay {
  position: absolute;
  top: 80px;
  right: 15px;
  font-weight: bold;
  text-align: right;
  font-size: 30px;
}

4 để tạo hiệu ứng lớp phủ gradient tuyến tính trên hình ảnh

.example img {
  width: 100%;
  position: relative;
}

.example .overlay {
  position: absolute;
  top: 80px;
  right: 15px;
  font-weight: bold;
  text-align: right;
  font-size: 30px;
}

1

Đ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 để làm nổi bật 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ù 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 lưu hình ảnh hoặc mở nó 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 các hiệu ứng này
• Cùng một mã 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 CDN hình ảnh như ImageKit. io

Lớp phủ 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ác tham số URL. Nó cũng đảm nhiệm việc tối ưu hóa hình ảnh và phân phối nội dung bằng CDN toàn cầu

Bạn sẽ cần một ImageKit. io để tạo lớp phủ văn bản và hình ảnh. Tạo một tài khoản miễn phí trên ImageKit. io nếu bạn chưa có. ImageKit. io cung cấp một gói miễn phí hào phóng cung cấp cho bạn băng thông lên tới 20 GB, hoàn toàn MIỄN PHÍ mỗi 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.
______211

Hiện nay,

• Hãy thêm một văn bản

  .example img {
    width: 100%;
    position: relative;
  }
  
  .example .overlay {
    position: absolute;
    top: 80px;
    right: 15px;
    font-weight: bold;
    text-align: right;
    font-size: 30px;
  }

  12 với cỡ chữ

  .example img {
    width: 100%;
    position: relative;
  }
  
  .example .overlay {
    position: absolute;
    top: 80px;
    right: 15px;
    font-weight: bold;
    text-align: right;
    font-size: 30px;
  }

  13 và màu đen

  .example img {
    width: 100%;
    position: relative;
  }
  
  .example .overlay {
    position: absolute;
    top: 80px;
    right: 15px;
    font-weight: bold;
    text-align: right;
    font-size: 30px;
  }

  14. Chúng tôi sẽ sử dụng tham số

  .example img {
    width: 100%;
    position: relative;
  }
  
  .example .overlay {
    position: absolute;
    top: 80px;
    right: 15px;
    font-weight: bold;
    text-align: right;
    font-size: 30px;
  }

  15 trong URL
• Với nền trắng trong suốt tôi. e.

  .example img {
    width: 100%;
    position: relative;
  }
  
  .example .overlay {
    position: absolute;
    top: 80px;
    right: 15px;
    font-weight: bold;
    text-align: right;
    font-size: 30px;
  }

  16. Chúng tôi sẽ thêm tham số

  .example img {
    width: 100%;
    position: relative;
  }
  
  .example .overlay {
    position: absolute;
    top: 80px;
    right: 15px;
    font-weight: bold;
    text-align: right;
    font-size: 30px;
  }

  17 vào URL
• Với phần đệm của

  .example img {
    width: 100%;
    position: relative;
  }
  
  .example .overlay {
    position: absolute;
    top: 80px;
    right: 15px;
    font-weight: bold;
    text-align: right;
    font-size: 30px;
  }

  18 sử dụng tham số

  .example img {
    width: 100%;
    position: relative;
  }
  
  .example .overlay {
    position: absolute;
    top: 80px;
    right: 15px;
    font-weight: bold;
    text-align: right;
    font-size: 30px;
  }

  19

URL cuối cùng trở thành.
______330

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 tham số từ tài liệu lớp phủ văn bản

Trường hợp sử dụng thương mại điện tử

Bạn sẽ thường thấy các nhãn quảng cáo hoặc thông tin 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

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

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

Ví dụ: URL hình ảnh sản phẩm là.
______331

Bây giờ, chúng tôi muốn thêm nhãn

.example img {
  width: 100%;
  position: relative;
}

.example .overlay {
  position: absolute;
  top: 80px;
  right: 15px;
  font-weight: bold;
  text-align: right;
  font-size: 30px;
}

32 với nền đồng màu

URL cuối cùng trở thành.
______333

Bạn có thể sử dụng URL này trong các ứng dụng dành cho thiết bị 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.

• .example img {
    width: 100%;
    position: relative;
  }
  
  .example .overlay {
    position: absolute;
    top: 80px;
    right: 15px;
    font-weight: bold;
    text-align: right;
    font-size: 30px;
  }

  34 về cơ bản là thay đổi kích thước hình ảnh thành kích thước

  .example img {
    width: 100%;
    position: relative;
  }
  
  .example .overlay {
    position: absolute;
    top: 80px;
    right: 15px;
    font-weight: bold;
    text-align: right;
    font-size: 30px;
  }

  35

• .example img {
    width: 100%;
    position: relative;
  }
  
  .example .overlay {
    position: absolute;
    top: 80px;
    right: 15px;
    font-weight: bold;
    text-align: right;
    font-size: 30px;
  }

  36 đang thêm văn bản

  .example img {
    width: 100%;
    position: relative;
  }
  
  .example .overlay {
    position: absolute;
    top: 80px;
    right: 15px;
    font-weight: bold;
    text-align: right;
    font-size: 30px;
  }

  32 vào hình ảnh

• .example img {
    width: 100%;
    position: relative;
  }
  
  .example .overlay {
    position: absolute;
    top: 80px;
    right: 15px;
    font-weight: bold;
    text-align: right;
    font-size: 30px;
  }

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

• .example img {
    width: 100%;
    position: relative;
  }
  
  .example .overlay {
    position: absolute;
    top: 80px;
    right: 15px;
    font-weight: bold;
    text-align: right;
    font-size: 30px;
  }

  39 đang đặt màu nền thành

  .example img {
    width: 100%;
    position: relative;
  }
  
  .example .overlay {
    position: absolute;
    top: 80px;
    right: 15px;
    font-weight: bold;
    text-align: right;
    font-size: 30px;
  }

  40

• .example img {
    width: 100%;
    position: relative;
  }
  
  .example .overlay {
    position: absolute;
    top: 80px;
    right: 15px;
    font-weight: bold;
    text-align: right;
    font-size: 30px;
  }

  41 được sử dụng để đặt bán kính đường viền của nền thành

  .example img {
    width: 100%;
    position: relative;
  }
  
  .example .overlay {
    position: absolute;
    top: 80px;
    right: 15px;
    font-weight: bold;
    text-align: right;
    font-size: 30px;
  }

  42

• .example img {
    width: 100%;
    position: relative;
  }
  
  .example .overlay {
    position: absolute;
    top: 80px;
    right: 15px;
    font-weight: bold;
    text-align: right;
    font-size: 30px;
  }

  43 là để đặt phần đệm trên-dưới và trái-phải thành

  .example img {
    width: 100%;
    position: relative;
  }
  
  .example .overlay {
    position: absolute;
    top: 80px;
    right: 15px;
    font-weight: bold;
    text-align: right;
    font-size: 30px;
  }

  44

• .example img {
    width: 100%;
    position: relative;
  }
  
  .example .overlay {
    position: absolute;
    top: 80px;
    right: 15px;
    font-weight: bold;
    text-align: right;
    font-size: 30px;
  }

  45 và

  .example img {
    width: 100%;
    position: relative;
  }
  
  .example .overlay {
    position: absolute;
    top: 80px;
    right: 15px;
    font-weight: bold;
    text-align: right;
    font-size: 30px;
  }

  46 đượ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

• .example img {
    width: 100%;
    position: relative;
  }
  
  .example .overlay {
    position: absolute;
    top: 80px;
    right: 15px;
    font-weight: bold;
    text-align: right;
    font-size: 30px;
  }

  47 và

  .example img {
    width: 100%;
    position: relative;
  }
  
  .example .overlay {
    position: absolute;
    top: 80px;
    right: 15px;
    font-weight: bold;
    text-align: right;
    font-size: 30px;
  }

  48 được sử dụng để kiểm soát kiểu chữ và kích thước phông chữ

hình ảnh kết quả

Hình mờ

Giả sử URL hình ảnh cơ sở là -

.example img {
  width: 100%;
  position: relative;
}

.example .overlay {
  position: absolute;
  top: 80px;
  right: 15px;
  font-weight: bold;
  text-align: right;
  font-size: 30px;
}

11

URL biểu trưng hình ảnh lớp phủ là.
______350

Bây giờ để phủ logo 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ố

.example img {
  width: 100%;
  position: relative;
}

.example .overlay {
  position: absolute;
  top: 80px;
  right: 15px;
  font-weight: bold;
  text-align: right;
  font-size: 30px;
}

51 i. e.

.example img {
  width: 100%;
  position: relative;
}

.example .overlay {
  position: absolute;
  top: 80px;
  right: 15px;
  font-weight: bold;
  text-align: right;
  font-size: 30px;
}

52

URL cuối cùng.
______353

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 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 ta có thể sử dụng tham số

.example img {
  width: 100%;
  position: relative;
}

.example .overlay {
  position: absolute;
  top: 80px;
  right: 15px;
  font-weight: bold;
  text-align: right;
  font-size: 30px;
}

54. Tham số

.example img {
  width: 100%;
  position: relative;
}

.example .overlay {
  position: absolute;
  top: 80px;
  right: 15px;
  font-weight: bold;
  text-align: right;
  font-size: 30px;
}

54 chấp nhận các giá trị vị trí tương đối i. e.

.example img {
  width: 100%;
  position: relative;
}

.example .overlay {
  position: absolute;
  top: 80px;
  right: 15px;
  font-weight: bold;
  text-align: right;
  font-size: 30px;
}

6,

.example img {
  width: 100%;
  position: relative;
}

.example .overlay {
  position: absolute;
  top: 80px;
  right: 15px;
  font-weight: bold;
  text-align: right;
  font-size: 30px;
}

8,

.example img {
  width: 100%;
  position: relative;
}

.example .overlay {
  position: absolute;
  top: 80px;
  right: 15px;
  font-weight: bold;
  text-align: right;
  font-size: 30px;
}

7,

.example img {
  width: 100%;
  position: relative;
}

.example .overlay {
  position: absolute;
  top: 80px;
  right: 15px;
  font-weight: bold;
  text-align: right;
  font-size: 30px;
}

0, v.v.

Làm cách nào để đặt lớp phủ hình ảnh trong CSS?

Làm cách nào để thêm tông màu vào CSS hình ảnh?

CSS lớp phủ hình ảnh là gì?