Tidadigi Logo

Tailwind CSS Background Image

Lớp 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à lựa chọn thay thế cho thuộc tính CSS background-image. Class này dùng để thiết lập một hoặc nhiều ảnh nền cho phần tử. Theo mặc định, nó đặt ảnh ở 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 Background Image:

  • bg-none: Class này được dùng để không đặt bất kỳ linear-gradient nào.
  • bg-gradient-to-t: Class này dùng để đặt linear-gradient lên trên cùng.
  • bg-gradient-to-tr: Class này dùng để đặt linear-gradient ở phía trên bên phải.
  • bg-gradient-to-r: Class này dùng để đặt linear-gradient sang phải.
  • bg-gradient-to-br: Class này dùng để đặt linear-gradient xuống dưới cùng bên phải.
  • bg-gradient-to-b: Class này dùng để đặt linear-gradient xuống dưới cùng.
  • bg-gradient-to-bl: Class này dùng để đặt linear-gradient xuống dưới cùng bên trái.
  • bg-gradient-to-l: Class này dùng để đặt linear-gradient sang trái.
  • bg-gradient-to-tl: Class này dùng để đặt linear-gradient lên trên cùng bên trái.

Cú pháp:

<element class="bg-gradient-to-{direction}">...</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 Image Class</b> 
    <div class="mx-4 grid grid-cols-3 gap-2">
    <div class="h-12 w-full bg-gradient-to-r rounded-lg
                from-yellow-400 via-green-500 to-blue-500">
    </div>
    <div class="h-12 w-full bg-gradient-to-tr rounded-lg
                from-yellow-400 via-green-500 to-blue-500">
    </div>
    <div class="h-12 w-full bg-gradient-to-br rounded-lg
                from-yellow-400 via-green-500 to-blue-500">
    </div>
    <div class="h-12 w-full bg-gradient-to-b rounded-lg
                from-yellow-400 via-green-500 to-blue-500">
    </div>
    <div class="h-12 w-full bg-gradient-to-bl rounded-lg
                from-yellow-400 via-green-500 to-blue-500">
    </div>
    <div class="h-12 w-full bg-gradient-to-tl rounded-lg
                from-yellow-400 via-green-500 to-blue-500">
    </div>
    <div class="h-12 w-full bg-gradient-to-l rounded-lg
                from-yellow-400 via-green-500 to-blue-500">
    </div>
</body> 
</html>

Đầu ra:

tailwind-css-background-image
Tailwind CSS background image

Last Updated : 20/07/2025