Tailwind CSS - 背景附件

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

Tailwind CSS 背景附件类

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

bg-fixed	background-attachment: fixed;
bg-local	background-attachment: local;
bg-scroll	background-attachment: scroll;

Tailwind CSS 背景附件类的功能

bg-fixed: 此类用于将背景图像相对于视口固定，并禁用其滚动。
bg-local: 此类允许背景图像随容器和视口一起滚动。
bg-scroll: 此类允许背景图像随视口一起滚动，但不随容器一起滚动。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS 背景附件示例

以下示例将说明背景附件类的不同实用程序。

设置背景固定

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

示例

Open Compiler

<!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类的用法。

示例

Open Compiler

<!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类的用法。

示例

Open Compiler

<!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>

打印页面