1. 背景
  2. background-position

背景

background-position

用于控制元素背景图像位置的工具类。

样式
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;
bg-(<自定义属性>)
background-position: var(<自定义属性>);
bg-[<值>]
background-position: <值>;

示例

基本示例

使用像 bg-centerbg-rightbg-left-top 这样的工具类来控制元素背景图像的位置

悬停在这些示例上以查看完整图像

bg-left-top

bg-top

bg-right-top

bg-left

bg-center

bg-right

bg-left-bottom

bg-bottom

bg-right-bottom

<div class="bg-[url(/img/mountains.jpg)] bg-left-top"></div><div class="bg-[url(/img/mountains.jpg)] bg-top"></div><div class="bg-[url(/img/mountains.jpg)] bg-right-top"></div><div class="bg-[url(/img/mountains.jpg)] bg-left"></div><div class="bg-[url(/img/mountains.jpg)] bg-center"></div><div class="bg-[url(/img/mountains.jpg)] bg-right"></div><div class="bg-[url(/img/mountains.jpg)] bg-left-bottom"></div><div class="bg-[url(/img/mountains.jpg)] bg-bottom"></div><div class="bg-[url(/img/mountains.jpg)] bg-right-bottom"></div>

使用自定义值

使用 bg-[<值>] 语法 来设置背景位置基于完全自定义的值

<div class="bg-[center_top_1rem] ...">  <!-- ... --></div>

对于 CSS 变量,您也可以使用 bg-(<自定义属性>) 语法

<div class="bg-(--my-bg-position) ...">  <!-- ... --></div>

这只是 bg-[var(<自定义属性>)] 的简写,它会自动为您添加 var() 函数。

响应式设计

前缀 background-position 工具类 中使用像 md: 这样的断点变体,以便仅在中等 屏幕尺寸及以上应用该工具类

<div class="bg-center md:bg-top ...">  <!-- ... --></div>

变体文档中了解更多关于使用变体的信息。

版权所有 © 2025 Tailwind Labs Inc.·商标政策