HTML Dog
跳至导航

CSS 属性:background-position

背景图像的位置(如果是平铺的,则是起始位置)。

background-position: top right 结合 background-repeat: no-repeat

可能的值

可以包含一个值,或者更常见的是两个值。

描述示例
[length]图像的左侧或顶部侧边点,从背景区域的左侧或顶部测量。50px
[percentage]从背景区域的左侧或顶部测量,其中 0% 将图像推到起始点,100% 将图像推到背景区域的整个宽度或高度的结束点。25%
center关键字。如果单独使用,等同于 50% 50%
top关键字。如果单独使用,等同于 50% 0%
right关键字。如果单独使用,等同于 100% 50%
bottom关键字。如果单独使用,等同于 50% 100%
left关键字。如果单独使用,等同于 0% 50%
[值] [值]两个长度/百分比值或两个关键字的任何合理组合。
如果值为长度或百分比,第一个是水平位置,第二个是垂直位置。
200px 100px
[值] [值] [值]偏移量。
  • 第一个值是关键字。
  • 第二个值是长度/百分比,表示从第一个值定义的边缘的距离。
  • 第三个值是关键字,没有偏移量。
top 10em right
[值] [值] [值] [值]偏移量。
  • 第一个值是关键字。
  • 第二个值是长度/百分比,表示从第一个值定义的边缘的距离。
  • 第三个值是关键字。
  • 第四个值是长度/百分比,表示从第三个值定义的边缘的距离。
top 10em right 5em
[值], [值]用于多个背景。用逗号分隔的值集对应于用逗号分隔的多个图像,与 background-image 对应。top right, 11px 22px
inherit
initial
unset

示例


.dimple { background-position: right bottom; }
/* Places a background image in the bottom-right corner of a box. */

.bump { background-position: top 30px left 2px; }
/* Background is 30 pixels down from the top and 2 pixels in from the left. */

浏览器支持