Tailwind CSS - 背景位置

上一頁
下一頁

Tailwind CSS 背景位置是一個實用程式，用於指定背景影像將在元素內放置的位置。

Tailwind CSS 背景位置類

以下是用於設定背景位置的Tailwind CSS 背景位置類的列表。

類 CSS 屬性
bg-bottom background-position: bottom;
bg-center background-position: center;
bg-left background-position: left;
bg-left-bottom background-position: left bottom;
bg-left-top background-position: left top;
bg-right background-position: right;
bg-right-bottom background-position: right bottom;
bg-right-top background-position: right top;
bg-top background-position: top;

Tailwind CSS 背景位置類的功能

  • bg-bottom: 此類用於將背景影像定位到底部。
  • bg-center: 此類用於將背景影像定位到中心。
  • bg-left: 此類用於將背景影像定位到左側。
  • bg-left-bottom: 此類用於將背景影像定位到左下角。
  • bg-left-top: 此類用於將背景影像定位到左上角。
  • bg-right: 此類用於將背景影像定位到右側。
  • bg-right-bottom: 此類用於將背景影像定位到右下角。
  • bg-right-top: 此類用於將背景影像定位到右上角。
  • bg-top: 此類用於將背景影像定位到頂部。

Tailwind CSS 背景位置示例

以下示例將說明背景位置類的不同實用程式。

背景影像底部對齊

以下示例說明了bg-bottom類的用法。

示例

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

<body class="p-3">
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Bg Bottom Class
    </h2>
    <div class="w-5/6 h-48 border-2 relative">
        <img src=
"https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0" 
                class="w-full h-full object-cover 
                    opacity-30">
        <div class="w-36 h-28 border-2 bg-bottom 
                    absolute bottom-0 left-28" 
                style="background-image:url(
'https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0')"
        >
        </div>
    </div>
</body>

</html>

背景影像居中對齊

以下示例說明了bg-center類的用法。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-3">
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Bg Center Class
    </h2>
    <div class="w-5/6 h-48 border-2 relative">
        <img src=
"https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0" 
                class="w-full h-full object-cover 
                    opacity-30">
        <div class="w-36 h-28 border-2 bg-center 
                    absolute bottom-10 left-28" 
                style="background-image:url(
'https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0')"
        >
        </div>
    </div>
</body>

</html>

背景影像左側對齊

以下示例說明了bg-left類的用法。

示例

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

<body class="p-3">
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Bg Left Class
    </h2>
    <div class="w-5/6 h-48 border-2 relative">
        <img src=
"https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0" 
                class="w-full h-full object-cover 
                    opacity-30">
        <div class="w-36 h-28 border-2 bg-left 
                    absolute bottom-10 left-0" 
                style="background-image:url(
'https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0')"
        >
        </div>
    </div>
</body>

</html>

背景影像左下角對齊

以下示例說明了bg-left-bottom類的用法。

示例

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

<body class="p-3">
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Bg Left Bottom Class
    </h2>
    <div class="w-5/6 h-48 border-2 relative">
        <img src=
"https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0" 
                class="w-full h-full object-cover 
                    opacity-30">
        <div class="w-36 h-28 border-2 bg-left-bottom
                    absolute bottom-0 left-0" 
                style="background-image:url(
'https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0')"
        >
        </div>
    </div>
</body>   

</html>

背景影像左上角對齊

以下示例說明了如何使用bg-left-top 類。

示例

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

<body class="p-3">
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Bg Left top Class
    </h2>
    <div class="w-5/6 h-48 border-2 relative">
        <img src=
"https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0" 
                class="w-full h-full object-cover 
                    opacity-30">
        <div class="w-36 h-28 border-2 bg-left-top
                    absolute top-0 left-0" 
                style="background-image:url(
'https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0')"
        >
        </div>
    </div>
</body>

</html>

背景影像右對齊

以下示例說明了如何使用bg-right 類。

示例

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

<body class="p-3">
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Bg Right Class
    </h2>
    <div class="w-5/6 h-48 border-2 relative">
        <img src=
"https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0" 
                class="w-full h-full object-cover 
                    opacity-30">
        <div class="w-36 h-28 border-2 bg-right
                    absolute top-10 right-0" 
                style="background-image:url(
'https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0')"
        >
        </div>
    </div>
</body>

</html>

背景影像右下角對齊

以下示例說明了如何使用bg-right-bottom 類。

示例

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

<body class="p-3">
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Bg Right Bottom Class
    </h2>
    <div class="w-5/6 h-48 border-2 relative">
        <img src=
"https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0" 
                class="w-full h-full object-cover 
                    opacity-30">
        <div class="w-36 h-28 border-2 bg-right-bottom
                    absolute bottom-0 right-0" 
                style="background-image:url(
'https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0')"
        >
        </div>
    </div>
</body>

</html>

背景影像右上角對齊

以下示例說明了如何使用bg-right-top 類。

示例

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

<body class="p-3">
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Bg Right Top Class
    </h2>
    <div class="w-5/6 h-48 border-2 relative">
        <img src=
"https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0" 
                class="w-full h-full object-cover 
                    opacity-30">
        <div class="w-36 h-28 border-2 bg-right-top
                    absolute top-0 right-0" 
                style="background-image:url(
'https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0')"
        >
        </div>
    </div>
</body>

</html>

背景影像頂部對齊

以下示例說明了如何使用bg-top 類。

示例

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

<body class="p-3">
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Bg Top Class
    </h2>
    <div class="w-5/6 h-48 border-2 relative">
        <img src=
"https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0" 
                class="w-full h-full object-cover 
                    opacity-30">
        <div class="w-36 h-28 border-2 bg-top
                    absolute top-0 left-24" 
                style="background-image:url(
'https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0')"
        >
        </div>
    </div>
</body>

</html>
列印頁面
上一頁
下一頁
廣告

© . All rights reserved.