Background đẹp cho Giảm giá sản phẩm trong wordpress

Trong trang bán hàng thường có BOX giảm giá , nó thường làm rất bắt mắt , Hôm này tớ Share Backgroup đẹp cho Giảm giá sản phẩm – Backgroup 1 và 2 , Dự kiến sẽ có nhiều cái như thế nhé

Dù nhỏ nhưng rất hữu ích nhé.

Background đẹp cho Giảm giá sản phẩm trong wordpress

Thống kê bài viết

Vào việc luôn nhé , Bạn thấy 2 mẫu ở dưới , chỉ cần mở css dán vào là xong nhé

backgroup đẹp cho Giảm giá sản phẩm trong wordpress - Backgroup 1 — Background đẹp cho Giảm giá sản phẩm trong wordpress – Mẫu 1

Mã css :

/* giảm giá 1 - Flatsome.xyz share */
.badge-frame .badge-inner {
    color: #fff;
    border: 0;
}
.badge-frame {
    margin-left: 0px;
    background-image: url(https://banhangchatluong.net/wp-content/uploads/2021/10/saleoff.png);
    height: 49px;
    width: 50px;
}
.badge-container {
    margin: 0;
}
span.onsale {
    margin-top: -10px;
    position: absolute;
    margin-left: -18px;
    font-size: 16px;
}

/* giảm giá 1 - Flatsome.xyz share */

.badge-frame .badge-inner {

color: #fff;

border: 0;

}

.badge-frame {

margin-left: 0px;

background-image: url(https://banhangchatluong.net/wp-content/uploads/2021/10/saleoff.png);

height: 49px;

width: 50px;

}

.badge-container {

margin: 0;

}

span.onsale {

margin-top: -10px;

position: absolute;

margin-left: -18px;

font-size: 16px;

}

CÓ THỂ BẠN QUAN TÂM

Note : nhớ download hình này về nhé , còn lười thì để thế cũng được hj

backgroup đẹp cho Giảm giá sản phẩm trong wordpress - Mẫu 2 — Background đẹp cho Giảm giá sản phẩm trong wordpress – Mẫu 2

Css nè :

/* giảm giá 2 - Flatsome.xyz share */
.badge-container {
    margin-top: 0px;
}
.badge-frame .badge-inner {
    border: 0px;
		    width: 50px;
    height: 50px;
		transform: none;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGc+IDxwYXRoIGQ9Ik0yMS40MSAxMS41OGwtOS05QzEyLjA1IDIuMjIgMTEuNTUgMiAxMSAySDRjLTEuMSAwLTIgLjktMiAydjdjMCAuNTUuMjIgMS4wNS41OSAxLjQybDkgOWMuMzYuMzYuODYuNTggMS40MS41OC41NSAwIDEuMDUtLjIyIDEuNDEtLjU5bDctN2MuMzctLjM2LjU5LS44Ni41OS0xLjQxIDAtLjU1LS4yMy0xLjA2LS41OS0xLjQyek01LjUgN0M0LjY3IDcgNCA2LjMzIDQgNS41UzQuNjcgNCA1LjUgNCA3IDQuNjcgNyA1LjUgNi4zMyA3IDUuNSA3eiIgZmlsbD0iIzFhNzNlOCI+IDwvcGF0aD4gPC9nPjwvc3ZnPg==);
}

.badge-inner {
    color: #f1f1f1 !important;
}
.badge-frame {
    height: 50px;
    margin-left: -2px;
}
.badge {
    display: table;
    z-index: 20;
    pointer-events: none;
    height: 2.8em;
    width: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* giảm giá 2 - Flatsome.xyz share */

.badge-container {

margin-top: 0px;

}

.badge-frame .badge-inner {

border: 0px;

width: 50px;

height: 50px;

transform: none;

background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGc+IDxwYXRoIGQ9Ik0yMS40MSAxMS41OGwtOS05QzEyLjA1IDIuMjIgMTEuNTUgMiAxMSAySDRjLTEuMSAwLTIgLjktMiAydjdjMCAuNTUuMjIgMS4wNS41OSAxLjQybDkgOWMuMzYuMzYuODYuNTggMS40MS41OC41NSAwIDEuMDUtLjIyIDEuNDEtLjU5bDctN2MuMzctLjM2LjU5LS44Ni41OS0xLjQxIDAtLjU1LS4yMy0xLjA2LS41OS0xLjQyek01LjUgN0M0LjY3IDcgNCA2LjMzIDQgNS41UzQuNjcgNCA1LjUgNCA3IDQuNjcgNyA1LjUgNi4zMyA3IDUuNSA3eiIgZmlsbD0iIzFhNzNlOCI+IDwvcGF0aD4gPC9nPjwvc3ZnPg==);

}

.badge-inner {

color: #f1f1f1 !important;

}

.badge-frame {

height: 50px;

margin-left: -2px;

}

.badge {

display: table;

z-index: 20;

pointer-events: none;

height: 2.8em;

width: auto;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

}

Xem qua demo tại đây nhé https://banhangchatluong.net

Nhớ xem những cái hay ho tiếp theo tớ sẽ share nhé

Chúc các bạn thành công !

background đẹp cho Giảm giá sản phẩm trong wordpress – Background 1

Background đẹp cho Giảm giá sản phẩm trong wordpress

CÓ THỂ BẠN QUAN TÂM

Note : nhớ download hình này về nhé , còn lười thì để thế cũng được hj

Các tin khác

3 thoughts on “background đẹp cho Giảm giá sản phẩm trong wordpress – Background 1”