关键字图像放置的方法有哪些？如何利用-属性提供值

您可以使用 - 属性来更改图像在背景中的位置。

以下示例将背景图像置于 body 元素的中心：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:center;
  }

有多种方法可以为 - 属性提供值。 首先，您可以使用一些关键字：top、left、right 和。 通常，这些关键字会成对出现，但情况并非总是如此。 还可以使用长度值，例如100px或5cm，最后还可以使用百分比值。 不同类型的值背景图像的位置略有不同。

关键词

图像放置关键字是最容易理解的，并且正如其名称所暗示的那样。 例如，右上角将图像放置在元素填充区域的右上角。

根据规范，位置关键字可以以任何顺序出现，只要不超过两个关键字即可——一个用于水平方向，另一个用于垂直方向。

如果只出现一个关键字，则认为是另一个关键字。

因此，如果您希望图像出现在每个段落中间上方，只需这样声明即可：

p
  { 
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:top;
  }

以下是等效的位置关键字：

单个关键词等效关键词

顶部

顶部还是顶部

或者

正确的

对还是对

左边

向左还是向左

百分比值

百分比值以更复杂的方式表示。 假设您想使用百分比值将图像在其元素中居中，这很简单：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50% 50%;
  }

这会导致图像被正确放置，其中心与其元素的中心对齐。 换句话说，百分比值同时应用于元素和图像。 也就是说，图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。

如果图像位于 0% 0%，则其左上角将放置在元素填充区域的左上角。 如果图像位置为100% 100%，则图像的右下角将放置在右边距的右下角。

因此，如果你想将图像水平放置 2/3，垂直放置 1/3，可以这样声明：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:66% 33%;
  }

如果仅提供百分比值，则提供的值将用作水平值，垂直值将假定为 50%。 这与关键字类似。

- 的默认值为 0% 0%，其功能相当于左上角。 这解释了为什么背景图像总是从元素填充区域的左上角平铺，除非您设置不同的位置值。

长度值

长度值表示元素填充区域左上角的偏移量。 偏移点是图像的左上角。

例如，如果设置值为 50px 100px，则图像的左上角将位于元素内边距区域的左上角向右 50 像素、向下 100 像素的位置：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

请注意，这与百分比值不同，因为偏移仅是从一个左上角到另一个左上角。 也就是说，图像的左上角与 - 声明中指定的点对齐。