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: 此类用于将背景图像定位到顶部。

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

示例

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

示例

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

示例

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

示例

Open Compiler
<!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 类。

示例

Open Compiler
<!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 类。

示例

Open Compiler
<!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 类。

示例

Open Compiler
<!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 类。

示例

Open Compiler
<!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 类。

示例

Open Compiler
<!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>
打印页面
上一页
下一页
广告