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:
Image Overlay
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['//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