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: 此類允許背景影像隨視口一起滾動，但不隨容器一起滾動。

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>

列印頁面