Class này chấp nhận nhiều giá trị trong tailwind CSS. Tất cả thuộc tính đều được trình bày dưới dạng class. Nó là một lựa chọn thay thế cho CSS background-size property. Class này dùng để thiết lập kích thước ảnh nền.
Các class Background Size:
- bg-auto
- bg-cover
- bg-contain
bg-auto: Nó được sử dụng để đặt class background-size về giá trị mặc định. Nó hiển thị background-image với kích thước gốc của nó.
Cú pháp:
<element class="bg-auto">...</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 Size Space Class</b>
<div class="bg-green-300
mx-16
space-y-4
p-2
justify-between">
<div class="bg-no-repeat bg-auto bg-center
bg-green-200 w-full h-48 border-2"
style="background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222231443/Screenshot20210222231435.png)">
</div>
</div>
</body>
</html>
Đầu ra:
bg-cover: Nó được sử dụng để thay đổi kích thước ảnh nền che phủ toàn bộ phần tử chứa.
Cú pháp:
<element class="bg-cover">...</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 Size Space Class</b>
<div class="bg-green-300
mx-16
space-y-4
p-2
justify-between">
<div class="bg-no-repeat bg-cover bg-center
bg-green-200 w-full h-48 border-2"
style="background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222231443/Screenshot20210222231435.png)">
</div>
</div>
</body>
</html>
Đầu ra:
bg-contain: Nó được sử dụng để chứa ảnh nền bên trong vùng chứa bằng cách thu nhỏ.
Cú pháp:
<element class="bg-contain">...</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 Size Space Class</b>
<div class="bg-green-300
mx-16
space-y-4
p-2
justify-between">
<div class="bg-no-repeat bg-contain bg-center
bg-green-200 w-full h-48 border-2"
style="background-image: url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222231443/Screenshot20210222231435.png)">
</div>
</div>
</body>
</html>
Đầu ra:
