Share Chèn ảnh nền chìm dưới các thành phần khác trên website với thư viện Multiple.js

filiallion

Administrator
Staff member
Administrator
Messages
585
Points
10
Language
Tiếng Việt
Việc chèn ảnh nền trên website đã trở nên phổ biến, gần như bất kỳ website nào cũng có một vài thành phần có ảnh nền. Các bạn cũng đã từng thấy ảnh nền được chèn chìm dưới nhiều thành phần khác trên website và chắc hẳn cũng đã suy nghĩ cách CSS để thực hiện. Nếu các bạn đã có phương án chèn ảnh nền chìm hoặc chưa thì các bạn có thể tham khảo thêm thư viện Multiple.js mà tôi giới thiệu với các bạn ở bài viết này.

Multiple.js là một thư viện JavaScript dùng để chèn ảnh nền nằm chìm bên dưới các thành phần khác trên website một cách nhanh chóng, đơn giản và chính xác, hỗ trợ hoạt động tốt trên gần như tất cả các trình duyệt web từ máy tính, máy tính bảng cho tới di động.

Các bạn có thể tải về thư viện Multiple.js tại địa chỉ https://github.com/NeXTs/Multiple.js và tích hợp vào website với nội dung mã lệnh HTML như sau:
HTML:
<link href="path/to/multiple.css" rel="stylesheet">
<script src="path/to/multiple.min.js"></script>
Các bạn tạo các thành phần HTML như ví dụ sau:
HTML:
<div class="item">Content 1</div>
<div class="item">Content 2</div>
<div class="item">Content 3</div>
Bây giờ, các bạn cài đặt thư viện Multiple.js để chèn ảnh nền chìm dưới các thành phần HTML trên như sau:
JavaScript:
var multiple = new Multiple({
    selector: '.item',
    background: 'linear-gradient(#004c89, #0062af)'
});
Các bạn có thể tìm hiểu thêm về thư viện Multiple.js tại địa chỉ https://multiple.js.org.
 
Back
Top