图像放置关键字最容易理解的作用就像其名字的意义。例如，top left 使图像放置在元素内边距区的左上角。
只要保证不超过两个关键字：一个对应水平方向，另一个对应垂直方向，那么你可以设置位置关键字以任何顺序出现。
如果只有一个关键字，则会默认另一个关键字为 center。
所以，如果希望每个段落的中部上方出现一个图像，只需声明如下：
p
{background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:top;}
下面是等价的位置关键字：
单一关键字 等价的关键字
center center center
top top center 或 center top
bottom bottom center 或 center bottom
right right center 或 center right
left left center 或 center left
百分数值
百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中，你可以按照下面的代码进行设置：
body
{background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:50% 50%;}
这会导致图像适当放置，其中心与其元素的中心对齐。
因此，如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处，可以这样声明：
body
{background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:66% 33%;}
长度值
长度值解释的是元素内边距区左上角的偏移，偏移点是图像的左上角。
比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：
body
{background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:50px 100px;}
注意，这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐。 |
发表于 2024-3-4 09:47
|