Tailwind CSS - Background Attachment

Tailwind CSS background-attachment 是一个实用程序，用于指定背景图像滚动时的行为。

Tailwind CSS background-attachment 类

以下是用于设置背景图像滚动行为的 Tailwind CSS background-attachment 类列表。

Tailwind CSS 背景附着类的功能

• bg-fixed:此类用于将背景图像相对于视口固定，并禁止其滚动。
• bg-local:此类使背景图像能够随容器和视口滚动。
• bg-scroll:此类使背景图像能够随视口滚动，但不随容器滚动。

Tailwind CSS 背景附着示例

以下示例将说明背景附着类的不同用途。

设置背景固定

以下示例说明了 bg-fixed 类的用法。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-2">
    <h2 class="text-2xl mb-3 font-bold">
        Tailwind CSS Background Fixed Class
    </h2>
    <div class="w-5/6 h-72 border-2 overflow-auto">
        <div class="bg-fixed bg-cover w-full h-36 mb-3" 
                style="background-image:url(
'https://d3mxt5v3yxgcsr.cloudfront.net/courses/2868/course_2868_image.jpg?v=1.0)">
        </div>
            HTML is a Standard Markup language for web pages. 
            HTML stands for HyperText Markup Language and is 
            used to create content and structure of any web page. 
            If you think of the human body as a web page then HTML 
            is the skeleton of the body. It is the building block of web pages.
        <br><br>
            HTML was created by Berners-Lee in late 1991 but 
            "HTML 2.0" was the first standard HTML specification
            which was published in 1995. Aim of this tutorial is
            to make you HTML expert by covering each tag and attribute's example codes.
    </div>
</body>

</html>

设置背景本地

以下示例演示了 bg-local 类的用法。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-3">
    <h2 class="text-2xl mb-3 font-bold">
        Tailwind CSS Background Local Class
    </h2>
        <div class="bg-local bg-cover w-5/6 h-72 mb-3 overflow-auto" 
                style="background-image:url(
'https://d3mxt5v3yxgcsr.cloudfront.net/courses/2868/course_2868_image.jpg?v=1.0)">
            <div class="text-lg p-5 text-yellow-500 font-bold 
                        text-center">
                    HTML is a Standard Markup language for web pages. 
                    HTML stands for HyperText Markup Language and is 
                    used to create content and structure of any web page.
                    If you think of the human body as a web page then HTML
                    is the skeleton of the body. It is the building block
                    of web pages.<br>HTML was created by Berners-Lee
                    in late 1991 but "HTML 2.0" was the first standard HTML
                    specification which was published in 1995. Aim of this 
                    tutorial is to make you HTML expert by covering each tag 
                    and attribute's example codes.<br>HTML was created 
                    by Berners-Lee in late 1991 but "HTML 2.0" was the first
                    standard HTML specification which was published in 1995. 
                    Aim of this tutorial is to make you HTML expert by covering
                    each tag and attribute's example codes.
            </div>
        </div>
</body>

</html>

设置背景滚动

以下示例演示了 bg-scroll 类的用法。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-3">
    <h2 class="text-2xl mb-3 font-bold">
        Tailwind CSS Background Scroll Class
    </h2>
        <div class="bg-scroll bg-cover w-5/6 h-72 mb-3 overflow-auto" 
                style="background-image:url(
'https://d3mxt5v3yxgcsr.cloudfront.net/courses/2868/course_2868_image.jpg?v=1.0)">
            <div class="text-lg p-5 text-yellow-500 font-bold 
                        text-center">
                    HTML is a Standard Markup language for web pages. 
                    HTML stands for HyperText Markup Language and is 
                    used to create content and structure of any web page.
                    If you think of the human body as a web page then HTML
                    is the skeleton of the body. It is the building block
                    of web pages.<br>HTML was created by Berners-Lee
                    in late 1991 but "HTML 2.0" was the first standard HTML
                    specification which was published in 1995. Aim of this 
                    tutorial is to make you HTML expert by covering each tag 
                    and attribute's example codes.<br>HTML was created 
                    by Berners-Lee in late 1991 but "HTML 2.0" was the first
                    standard HTML specification which was published in 1995. 
                    Aim of this tutorial is to make you HTML expert by covering
                    each tag and attribute's example codes.
            </div>
        </div>
</body>

</html>