Cách chèn khung ảnh vào ảnh sản phẩm như Shopee

Bộ sưu tập khung ảnh:

Tạo CSS khung ảnh sản phẩm:

Ở đây mình sẽ gọi element UX Product, và đặt class là noibat

Sau đó thêm css như sau:

/* Khung cho sản phẩm nổi bật / .noibat .box-image:before { content: ”; z-index: 3; width: 100%; height: 100%; background: url(http://vattubd.com/wp-content/uploads/2021/10/khung4.png) no-repeat; background-size: contain; position: absolute; margin-left: -50%; } / Khung cho sản phẩm – shop – bài liên quan / .has-equal-box-heights .box-image:before { content: ”; z-index: 3; width: 100%; height: 100%; background: url(http://vattubd.com/wp-content/uploads/2021/10/khung2.png) no-repeat; background-size: contain; position: absolute; margin-top: -100%; } / Khung cho siler sản phẩm */
.product-gallery-slider:before {
content: ”;
z-index: 3;
width: 100%;
height: 100%;
background: url(http://vattubd.com/wp-content/uploads/2021/10/khung.png) no-repeat;
background-size: contain;
position: absolute;
}

Sau đó lưu lại và xem kết quả