Tailwind CSS - Background Position

Tailwind CSS background-position 是一个实用程序，用于指定背景图像在元素中的定位位置。

Tailwind CSS background-position 类

以下是用于设置背景位置的 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>

❮ ❯

Tailwind CSS 教程

Tailwind CSS 核心概念

Tailwind CSS 自定义

Tailwind CSS 基本样式

Tailwind CSS 布局

Tailwind CSS 弹性盒和网格

Tailwind CSS 间距

Tailwind CSS 尺寸

Tailwind CSS 字体排版

Tailwind CSS 背景

Tailwind CSS 边框

Tailwind CSS 效果

Tailwind CSS 滤镜

Tailwind CSS 表格

Tailwind CSS 过渡和动画

Tailwind CSS 变换

Tailwind CSS 交互性

Tailwind CSS SVG

Tailwind CSS 可访问性

Tailwind CSS 额外内容

Tailwind CSS 参考

Tailwind CSS 资源