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

  • .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;
    }
    
    1
    • .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;
      }
      
      2
    • .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;
      }
      
      3
    • .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;
      }
      
      4

Tính năng bố cục định vị trong CSS

Cá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 title

  • 0 bên cạnh các khai báo
  • Image title

  • 1 và
  • Image title

  • 2 trên phần tử chứa văn bản, chúng ta có thể di chuyển văn bản tiêu đề ra khỏi luồng tài liệu đến một vị trí tương đối so với trình bao bọc chính, như vậy

    Lớp phủ hình nền css
    Lớp phủ hình nền css

    Vớ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; } 0

    Mộ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)
    trên CodePen

    Lớp phủ hình ảnh CSS đơn giản với màu nền văn bản

    Lớ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% OFF

  • Chú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

    Lớp phủ hình nền css
    Lớp phủ hình nền css

    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 ảnh

    Mộ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 title

  • Với các khai báo

  • Image title

  • 0,
  • Image title

  • 5,
  • Image title

  • 6 trên lớp phủ, chúng ta có thể đặt văn bản lớp phủ ở dưới cùng của hình ả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;
    }
    

    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

    Lớp phủ hình nền css
    Lớp phủ hình nền css

    Để đả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 ảnh

    Xem xét đánh dấu sau

  • Image title

  • Trên phần tử lớp phủ, chúng ta sẽ sử dụng các khai báo

  • Image title

  • 2,
  • Image title

  • 8,
  • Image title

  • 9 và
  • Image title

  • 1 để kéo giãn lớp phủ sao cho nó bao phủ toàn bộ hình ảnh

    .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

    Lớp phủ hình nền css
    Lớp phủ hình nền css

    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 CSS

    Hã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 title

  • Ngoà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 nền css
    Lớp phủ hình nền css

    Lớp phủ hình ảnh hiển thị văn bản khi di chuột với hiệu ứng trượt

    Chú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 title

  • 9 và
  • Image title

  • 1 cho phép chúng ta đạt được hiệu ứng trượt xuống khi chúng ta di chuột qua hình ảnh

    .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

    Lớp phủ hình nền css
    Lớp phủ hình nền css

    Biểu tượng hiển thị lớp phủ hình ảnh khi di chuột với hiệu ứng thu phóng

    Tươ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

  • 2 CDN và sau đó áp dụng các quy tắc CSS như vậy

    .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

    Lớp phủ hình nền css
    Lớp phủ hình nền css

    Hình ảnh trên hình ảnh được hiển thị khi di chuột với hiệu ứng thu phóng

    Giố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

    Lớp phủ hình nền css
    Lớp phủ hình nền css

    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


    Lớp phủ hình nền css
    Lớp phủ hình nền css

    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ơn

    Lớp phủ hình nền css
    Lớp phủ hình nền css
    Tì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 title

  • 3

    Chúng tôi sẽ cung cấp cho container này một tài sản

  • Image title

  • 4. Sau đó, chúng tôi sẽ cung cấp vùng chứa hình ảnh được phủ — tôi. e
  • Image title

  • 5 — một
  • Image title

  • 0 đồng thời định vị nó bằng cách sử dụng
  • Image title

  • 7 hoặc tương đương như
  • Image title

  • 2,
  • Image title

  • 8,
  • Image title

  • 9 và
  • Image title

  • 1

    Cá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ền

    Khô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)
    trên CodePen

    Hình nền với lớp phủ văn bản đơn giản bằng CSS

    Chú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

    Lớp phủ hình nền css
    Lớp phủ hình nền css

    Để đả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

    Lớp phủ hình nền css
    Lớp phủ hình nền css

    Để 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ền

    Sử 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% OFF

  • 0

    Vớ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

    Lớp phủ hình nền css
    Lớp phủ hình nền css

    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; } 9

    Cá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% OFF

  • 1

    Sau đó, 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% OFF

  • 2

    Kết quả bây giờ sẽ giống như vậy

    Lớp phủ hình nền css
    Lớp phủ hình nền css

    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; } 7

    Vớ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% OFF

  • 3

    Sau đó, 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% OFF

  • 4

    Kết quả sẽ giống như vậy

    Lớp phủ hình nền css
    Lớp phủ hình nền css

    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; } 9

    Giố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% OFF

  • 5

    Vớ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% OFF

  • 6

    Nếu chúng ta nhìn vào kết quả, chúng ta sẽ có một cái gì đó như sau

    Lớp phủ hình nền css
    Lớp phủ hình nền css

    Với

  • Image title

  • 2 phủ định được áp dụng trên lớp phủ, chúng tôi có thể mong đợi màu nền xuất hiện phía sau văn bản. Tuy nhiên, nó lùi xa so với ảnh nền

    Nế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% OFF

  • 7

    Kết quả của việc loại bỏ hình nền

    Lớp phủ hình nền css
    Lớp phủ hình nền css

    Để đả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 title

  • 3 trên phần tử nền để tạo ngữ cảnh xếp chồng mới

    Hãy trả về hình nền và thêm thuộc tính

  • Image title

  • 3

  • 10% OFF

  • 8

    Tạ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% OFF

  • 9

    Kết quả bây giờ sẽ giống như vậy

    Lớp phủ hình nền css
    Lớp phủ hình nền css

    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ận

    Tạ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.
    Lớp phủ hình nền css
    Lớp phủ hình nền css
    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