Tidadigi Logo

Tailwind CSS Background Attachment

Trong bài viết này, chúng ta sẽ tìm hiểu cách đính kèm ảnh nền bằngTailwind CSS.

Cách tiếp cận:

Bạn có thể dễ dàng đính kèm ảnh nền bằng cách sử dụng background-attachment property 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ế choCSS background-attachment property. Thuộc tính này có thể được đặt để cuộn hoặc cố định.

Các class background attachment:

  • bg-fixed: Class này dùng để cố định ảnh nền so với viewport.
  • bg-local: Class này dùng để cuộn ảnh nền cùng với container và viewport.
  • bg-scroll: Class này dùng để cuộn ảnh nền với viewport, không cuộn với container.

Cú pháp:

<div class="bg-fixed ...">
    ...
</div>

Ví dụ 1: Ví dụ sau minh họa cách cố định ảnh nền so với viewport bằng class bg-fixed.

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 Attachment Class</b>
    
    <div class="mx-4  h-screen w-full">
        <div class="bg-fixed bg-contain overflow-auto 
            m-20 h-80 w-38" style="background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210603152813/tree276014340-300x191.jpg
            )">
        </div>
    </div>
</body>

</html>

Đầu ra:


Ví dụ 2: Ví dụ sau minh họa cách cố định ảnh nền với container và viewport bằng thuộc tính bg-local.

HTML 
<!DOCTYPE html>
<html>

<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        rel="stylesheet">
</head>

<body>

    <div class="mx-4  flex items-center 
        justify-center h-screen w-full">

        <div class="bg-local bg-contain 
            overflow-auto m-20 h-80 w-38" 
            style="background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210603154238/download-200x125.jpeg)">

            <div class="h-64 w-64"></div>
        </div>
    </div>
</body>

</html>

Đầu ra:


Ví dụ 3: Ví dụ sau minh họa cách cố định ảnh nền với viewport không phải container bằng thuộc tính bg-scroll.

HTML 
<!DOCTYPE html>
<html>

<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        rel="stylesheet">
</head>

<body>

    <div class="mx-4  flex items-center 
        justify-center h-screen w-full">

        <div class="bg-scroll bg-contain 
            overflow-auto m-20 h-60 w-38" 
            style="background-image:url(
 https://media.geeksforgeeks.org/wp-content/uploads/20210628092647/bgimage.jpg
            )">
            
            <div class="h-64 w-64"></div>
        </div>
    </div>
</body>

</html>

Đầu ra:



Last Updated : 20/07/2025