📌  相关文章
📜  如何在 css 中更改图像位置(1)

📅  最后修改于: 2023-12-03 15:24:09.184000             🧑  作者: Mango

如何在 CSS 中更改图像位置

在 CSS 中，可以使用 background-image 属性来设置图像作为一个元素的背景。同时，你还可以利用其他属性来更改图像位置，比如：

  • background-position：改变图像的位置
  • background-repeat：设置图像在背景中重复显示的方式
  • background-size：设置图像的尺寸
  • background-origin：定义 CSS 盒模型左上角的位置（即背景的相对位置）
  • background-clip：定义背景的绘制区域

下面我们将逐一介绍这些属性。

1. background-position

background-position 属性用于改变图像在元素背景中的位置。该属性可以取两个值，分别表示图像在横向和纵向的偏移量（单位为像素、百分比或关键字）。

例如， background-position: 50% 50%; 将使背景图像居中的位置，并且将横向和纵向的偏移量都设置为居中（即 50%）。

下面是一些可能的值：

  • left / center / right top / center / bottom：关键字，表示背景图像在盒模型中的位置。
  • [<length> | <percentage>]{1,2}：百分比或像素值，表示背景图像在盒子中的偏移量。第一个值表示图像在水平方向上的偏移量，第二个值表示竖直方向上的偏移量（如果只有一个值，则假定为水平方向）。
  • [top | center | bottom] [left | center | right]：表示背景图像在盒模型中的位置。第一个值表示竖直方向上的偏移量，第二个值表示水平方向上的偏移量。
  • inherit：从父元素继承值。
2. background-repeat

background-repeat 属性用于设置背景图像在盒模型中的重复方式。

该属性可以取三个值：

  • repeat：背景图像在可用空间内重复平铺。它默认为 repeat-x 和 repeat-y。
  • repeat-x：仅在水平方向上重复背景图像。
  • repeat-y：仅在垂直方向上重复背景图像。
  • no-repeat：背景图像仅在一定位置呈现一次，不进行重复。

例如， background-repeat: no-repeat; 将使背景图像仅在一定位置呈现一次。

3. background-size

background-size 属性设置元素背景图像的尺寸。

该属性可以取四个值：

  • <length>：指定背景图像的固定宽度或高度，单位为像素或其他任何 CSS 长度。
  • <percentage>：根据盒子的大小来指定背景图像的宽度或高度的百分比。例如，背景图像的宽度可以设置为 100%，这样图片将填满整个元素。
  • cover：尽可能大地显示背景图像，覆盖整个背景区域。
  • contain：保持背景图像的纵横比，并确保图像被完全包含在背景区域中。

例如， background-size: contain; 将保持背景图像的纵横比，使其被完全包含在背景区域中。

4. background-origin

background-origin 属性定义背景图片相对于元素框左上角的位置。该属性可以取三个值：

  • padding-box：背景在填充区域内绘制。
  • border-box：背景在边框区域内绘制。
  • content-box：背景在内容区域内绘制。

例如， background-origin: content-box; 将使背景图片相对于元素内容框的左上角定位。

5. background-clip

background-clip 属性定义背景绘制区域。该属性可以取三个值：

  • border-box：绘制在边框下方。
  • padding-box：绘制在填充下方，但位于边框上方。
  • content-box：绘制在元素的内容框。

例如， background-clip: border-box; 将使背景绘制在边框下方。

至此，我们介绍了在 CSS 中更改图像位置的方法。这些属性可以互相组合，从而满足各种需求。

参考