CSS background-position-y shuxing

kufafanisha na matumizi

background-position-y muatili huu ina mpangilio kwa eneo la yau za imaji gaba.

mzunguko:dababu, imaji gaba za background ina kubadawo katika kina kwa kiini na kwa kuzingatia kwa kipimo cha kina na kipimo cha kina.

kwalli

masanin 1

kannu wakar dace ta imaji gaba a yau?

div {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-y: center;
}

亲自试一试

masanin 2

kannu wakar dace ta imaji gaba?

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: bottom;
}

亲自试一试

例子 3

如何使用百分比在 y 轴上定位背景图像:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: 50%;
}

亲自试一试

例子 4

如何使用像素在 y 轴上定位背景图像:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: 80px;
}

亲自试一试

CSS 语法

background-position-y: value;

属性值

描述
top 将背景定位在 y 轴的顶部。
bottom 将背景定位在 y 轴的底部。
center 将背景定位在 y 轴的中心。
y%

y 轴的顶部为 0%,底部为 100%。

百分比值指的是背景定位区域的高度减去背景图像的高度。

ypos

从顶部的垂直距离。

单位可以是像素(如 0px)或其他 CSS danwei

ypos offset

双值语法,仅在 Firefox 和 Safari 中支持。

  • ypos 设置为 top 或 bottom。
  • offset 是背景图像与 ypos 设置的顶部或底部的垂直距离。

单位可以是像素或其他 CSS danwei

initial 将此属性设置为其默认值。参阅 initial
inherit 从其父元素继承此属性。参阅 inherit

技术细节

默认值: 0%
继承性:
动画制作: 支持。请参阅:动画相关属性
版本: CSS3
JavaScript 语法: object.style.backgroundPositionY="center"

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
单值语法 1.0 12.0 49.0 1.0 15.0
双值语法 不支持 不支持 49.0 15.4 不支持

相关页面

教程:背景 CSS

CSS 参考:background-image 属性

CSS 参考:background-position 属性

CSS 参考:background-position-x 属性

HTML DOM 参考:backgroundPosition 属性