CSS - background-position 属性

上一页
下一页

css background-position 属性设置元素的背景图像的初始位置。图像的位置相对于 background-origin 属性设置的值。

可能的值

<position>：定义 x/y 坐标，该坐标相对于元素框的边缘。

  • 使用 1 到 4 个值定义。
  • 当传递两个非关键字值时，第一个值指定水平位置，第二个值指定垂直位置。
  • 当只指定一个值时，第二个值被视为中心。
  • 当指定了三个或四个值时，它们将被视为关键字值之前的偏移量。

One-value syntax：值可能是以下值之一：

  • center：关键字中心，表示位置居中。
  • top、left、bottom 或 right：指定图像要定位的边缘。其他值设置为 50%。
  • <length> 或 <percentage>：指定相对于元素左边缘的 X 坐标，并将 Y 坐标设置为 50%。

Two-value syntax：一个值定义 X 坐标，另一个值定义 Y 坐标。以下值之一可能是：

  • top、left、bottom 或 right：无论指定哪个值，都表示 X 和 Y 坐标。
  • <length> 或 <percentage>：当其他值在左边或右边时，它定义 Y 坐标，当顶部或底部时，它定义 X 坐标。当两个值都是长度或百分比时，首先分别定义 X 坐标和第二个 Y 坐标。
  • top top | bottom bottom | left right | right left：值无效。
  • 配对关键字的顺序并不重要，因为浏览器会对值进行排序。因此，左上角与左上角相同。
  • 在将关键字与 <length> 或 <percentage>值配对时，顺序很重要。因此，剩下的 20px 和剩下的 20px 是不一样的。
  • 默认值为 left top 或 0% 0%。

Three-value syntax：两个是关键字值，第三个是前一个值的偏移量。

  • top、left、bottom、right 或 center：当指定了 left 或 right 值时，表示 X 坐标。当指定 top 或 bottom 时，表示 Y 坐标。
  • <length> 或 <percentage>：当它作为第二个值传递时，它是第一个值的偏移量，当它作为第三个值传递时，它是第二个值的偏移量。
  • 单个长度或百分比值是关键字值之前的偏移量。
  • 一个关键字和两个长度或百分比值的组合无效。

Four-value syntax：第一个和第三个是关键字值，指定 X 和 Y 坐标。第二个和第四个值是前面的关键字值的偏移量。

  • top、left、bottom 或 right：第一个和第三个值作为关键字。当 left 或 right 作为第一个值时，第一个表示 X 值，另一个表示 Y 值。当 top 或 bottom 作为第一个值给出时，它定义 Y 值，另一个表示 X 值。
  • <length> 或 <percentage>：当它作为第二个和第四个值传递时，第二个值是第一个关键字值的偏移量，第四个值是第二个关键字值的偏移量。

百分比值

背景图像位置的偏移百分比是相对于容器的偏移量。有关更多说明，请参阅下面给出的要点：

  • 0% 表示图像的上边缘或左边缘与容器的顶部或左边缘对齐。
  • 100% 表示图像的底部或右边缘与容器的底部或右边缘对齐。
  • 50% 将图像与容器水平或垂直居中。
  • 75% 25% 表示图像将从左侧 75% 放置，从容器顶部放置 25%。

适用于

所有 HTML 元素。

DOM 语法


object.style.backgroundPosition = "top 30%";

CSS background-position - 单值语法

下面是一个示例，其中图像使用单值语法进行定位：


<html>
<head>
<style> 	
	 	.position-right {
	 	 	 background-image: url('images/tutimg.png');
	 	 	 background-position: right;
	 	 	 background-repeat: no-repeat;
	 	 	 width: 500px;
	 	 	 height: 300px;
	 	 	 border: 3px solid black;
	 	 	 position: relative;
	 	}
</style>
</head>
<body>
	 	 	 <div class="position-right"></div>
</body>
</html>

CSS background-position - 不同类型的语法

以下示例显示了所有不同类型的语法格式：


<html>
<head>
<style> 	
	 	div {
	 	 	 background-color: gainsboro;
	 	 	 background-repeat: no-repeat;
	 	 	 width: 300px;
	 	 	 height: 100px;
	 	 	 margin-bottom: 12px;
	 	}

	 	.onevalue {
	 	 	 background-image: url('images/smiley.png');
	 	 	 background-repeat: no-repeat;
	 	 	 background-position: bottom;
	 	}

	 	.twovalue {
	 	 	 background-image: url('images/smiley.png');
	 	 	 background-repeat: no-repeat;
	 	 	 background-position: right top;
	 	}

	 	.threevalue {
	 	 	 background-image: url('images/smiley.png');
	 	 	 background-position: right 3em bottom;
	 	}

	 	.fourvalue {
	 	 	 background-image: url('images/smiley.png');
	 	 	 background-position: top 25% left 40%;
	 	}
</style>
</head>
<body>
	 	<div class="onevalue">One-value syntax</div>
	 	<div class="twovalue">Two-value syntax</div>
	 	<div class="threevalue">Three-value syntax</div>
	 	<div class="fourvalue">Four-value syntax</div>
</body>
</html>
打印本页
上一页
下一页