Kỹ thuật lớp phủ trong CSS là một cách để chuyển đổi văn bản trên hình ảnh. Các thuộc tính CSS “background-image” và CSS “background” được sử dụng để đạt được hiệu ứng lớp phủ này. Mục đích của bài viết này là khám phá cách sử dụng CSS để đặt hình ảnh lớp phủ có màu

Kết quả của bài viết này là

• • Thuộc tính hình nền trong CSS là gì?
  • Thuộc tính nền trong CSS là gì?
  • Làm cách nào để đặt Hình ảnh lớp phủ có màu?

chúng ta hãy bắt đầu

tài sản hình nền

Để thêm một hình ảnh làm nền cho bất kỳ thành phần HTML nào, có thể sử dụng thuộc tính “background-image”

cú pháp

Cú pháp của thuộc tính hình nền là

hình nền. url hình ảnh () ;

 
Chỉ định tên hình ảnh hoặc đường dẫn đầy đủ của nó trong url().

Thuộc tính nền trong CSS là gì?

Nó là một thuộc tính tốc ký được sử dụng để gán các giá trị khác nhau cho hình ảnh, chẳng hạn như màu sắc, kích thước, vị trí, v.v.

cú pháp

Cú pháp của thuộc tính nền là

nền. màu sắc . vị trí . kích thước ;

• • màu sắc. Nó được sử dụng để gán màu nền
  • Chức vụ. Nó được sử dụng để đặt vị trí nền
  • kích thước. Nó được sử dụng để xác định kích thước nền

Đây là một ví dụ để giải thích điểm

Thí dụ. Làm cách nào để đặt hình ảnh lớp phủ có màu?

In this example first, we will create a div, named “overlay” and inside the div, we have added a handing with

tag:

< body >
  <div class="overlay">
    <h1>Image Overlayh1>
  div>
body>

 
Bây giờ, chúng ta sẽ thêm hình nền với sự trợ giúp của CSS. Là “url()”, chúng ta đã đưa ra đường dẫn hình ảnh và gán chiều rộng “350px, chiều cao “250px” và vị trí “tuyệt đối” của hình ảnh.

.image {
  nền. url ("hình ảnh. jpg") không lặp lại;
  chiều rộng. 350px;
  chiều cao. 250px;
vị trí. tuyệt đối;
  }

 
Điều này sẽ cho kết quả sau.

Bây giờ, chúng ta hãy tiến thêm một bước để áp dụng hiệu ứng lớp phủ cho nó

.overlay{
  nền. rgba (233 , 140 . 7 0, 0.7) ;
  lề trên. 10px;
  lề trái. 55px;
  chiều rộng. 200px;
  cỡ chữ. 25px ;
  màu. rgb (252 , 80 . tuyệt đối; 0);
  position: absolute;
}

 
Ở đây, chúng tôi đã sử dụng các thuộc tính CSS khác nhau để phục vụ các chức năng khác nhau.

• • lai lịch. Chúng tôi đã chỉ định màu lớp phủ bằng thuộc tính nền
  • lề. Để chỉ định vị trí của lớp phủ, hãy sử dụng thuộc tính lề
  • bề rộng. Tham số này chỉ định kích thước của lớp phủ được hiển thị trên hình nền
  • cỡ chữ. Nó chỉ định kích thước phông chữ
  • màu sắc. Đặt màu văn bản
  • Chức vụ. Xác định nơi văn bản sẽ xuất hiện

Sau khi thực hiện các điểm nêu trên, hãy lưu mã tệp HTML và CSS và kiểm tra kết quả

Chúng tôi đã cung cấp phương pháp đặt hình ảnh lớp phủ có màu trong CSS

Sự kết luận

Hiệu ứng lớp phủ có thể đạt được bằng cách sử dụng các thuộc tính CSS “background-image” và CSS “background”. nó có thể được thực hiện bằng cách gán một hình ảnh cho thuộc tính hình nền và đặt màu trong thuộc tính nền. Hơn nữa, đây là một kỹ thuật kết hợp nhiều phần tử trong một vùng chứa. Bài đăng này đã trình bày cách đặt hình ảnh lớp phủ có màu trong CSS bằng các ví dụ

Lớp phủ có thể là một bổ sung tuyệt vời cho hình ảnh và tạo ra một trang web hấp dẫn. Trong đoạn mã này, chúng tôi sẽ chỉ ra các cách sử dụng lớp phủ khác nhau trong CSS

Một phương pháp phổ biến là sử dụng lớp phủ màu trên hình ảnh được liên kết. Đầu tiên, chúng tôi sẽ minh họa một ví dụ trong đó chúng tôi làm tối hình ảnh một chút. Hãy bắt đầu với việc tạo HTML

• Sử dụng và

  cho tiêu đề

• Sử dụng hai

  các yếu tố cho hình ảnh gốc và hình ảnh lớp phủ

• thêm cái khác

  cho hình ảnh lớp phủ bên trong cái thứ hai

Example
Original image

Overlay image

  

h1 {
  text-align: center;
}

.overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.image {
  width: 500px;
  height: 330px;
  margin-bottom: 20px;
  background-image: url('https://images.unsplash.com/photo-1538367999111-0d6c7fb0299f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

Bây giờ, bạn có thể xem ví dụ đầy đủ

  
    Title of the document
    
  
  
    Example
    
Original image
    
    
Overlay image
    

      

      
    

  

Kết quả

Hình ảnh gốc Hình ảnh lớp phủ

Chúng tôi cũng có thể thêm hiệu ứng di chuột vào các hình ảnh được liên kết. Lớp phủ màu là hiệu ứng phổ biến nhất có thể thêm vào trang web và tạo hiệu ứng di chuột. Hãy xem một số ví dụ và tìm hiểu cách tạo hiệu ứng lớp phủ trên hình ảnh khi di chuột

  
    
  
  
    

      
      

        
Travel
      

    

  

  
    Title of the document
    
  
  
    

      
      

        
Travel
      

    

  

  
    Title of the document
    
  
  
    

      
      
Travelling
    

  

Trong ví dụ cuối cùng của chúng tôi, chúng tôi tạo hiệu ứng của lớp phủ hình ảnh bằng cách sử dụng hai hình ảnh, một trong số chúng chồng lên hình ảnh kia. Hình ảnh thứ hai của chúng ta sẽ xuất hiện ở góc dưới cùng bên phải của hình ảnh đầu tiên khi di chuột

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

Làm cách nào để phủ hai hình ảnh trong CSS?

Bạn có thể xếp lớp hình ảnh trong CSS không?

Bạn có thể phủ CSS màu hình ảnh không?