Class này chấp nhận nhiều giá trị trong tailwind CSS. Tất cả thuộc tính được bao phủ dưới dạng class. Nó là một giải pháp thay thế cho thuộc tính CSS background-position. Class này được dùng để đặt một hoặc nhiều ảnh nền cho một phần tử. Mặc định ảnh được đặt ở góc trên bên trái. Để chỉ định hai hoặc nhiều ảnh, hãy phân tách các URL bằng dấu phẩy.
Các Class Vị Trí Nền:
- bg-left-top: Nó được định vị ở left-top của background.
- bg-top: Nó được định vị ở top của background.
- bg-right-top: Nó được định vị ở right-top của background.
- bg-left: Nó được định vị ở phía left của background.
- bg-center: Nó được định vị ở center của background.
- bg-right: Nó được định vị ở phía right của background.
- bg-left-bottom: Nó được định vị ở phía left-bottom của background.
- bg-bottom: Nó được định vị ở phía bottom của background.
- bg-right-bottom: Nó được định vị ở phía right-bottom của background.
Lưu ý: Tất cả các class được sử dụng trong ví dụ dưới đây.
Cú pháp:
<element class="bg-{side}">...</element>
Ví dụ:
HTML<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Background Position Class</b>
<div class="bg-green-300
mx-16
space-y-4
p-2
justify-between
grid grid-rows-3
grid-flow-col">
<div title="bg-left-top"
class="bg-no-repeat bg-left-top
bg-gree-200 w-24 h-24
border-4 my-4"
style=
"background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)">
</div>
<div title="bg-left"
class="bg-no-repeat bg-left
bg-gree-200 w-24 h-24
border-4 my-4"
style=
"background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)">
</div>
<div title="bg-left-bottom"
class="bg-no-repeat bg-left-bottom
bg-gree-200 w-24 h-24
border-4 my-4"
style="background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)">
</div>
<div title="bg-top"
class="bg-no-repeat bg-top
bg-gree-200 w-24 h-24
border-4 my-4"
style="background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)">
</div>
<div title="bg-center"
class="bg-no-repeat bg-center
bg-gree-200 w-24 h-24
border-4 my-4"
style="background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)">
</div>
<div title="bg-bottom"
class="bg-no-repeat bg-bottom
bg-gree-200 w-24 h-24
border-4 my-4"
style="background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)">
</div>
<div title="bg-right-top"
class="bg-no-repeat bg-right-top
bg-gree-200 w-24 h-24
border-4 my-4"
style="background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)">
</div>
<div title="bg-right"
class="bg-no-repeat bg-right
bg-gree-200 w-24 h-24
border-4 my-4"
style="background-image: url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)">
</div>
<div title="bg-right-bottom"
class="bg-no-repeat bg-right-bottom
bg-gree-200 w-24 h-24
border-4 my-4"
style="background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)">
</div>
</div>
</body>
</html>
Kết quả: Bạn có thể di chuột lên ảnh đầu ra. Mỗi ảnh sẽ hiển thị background-position của nó trong tooltip.
