CSS background-position-y 属性

నిర్వచనం మరియు వినియోగం

background-position-y అటువంటి అనునంది బ్యాక్‌గ్రౌండ్ ఇమేజ్‌న్‌ను y అక్షంపై పోసించడానికి ఉపయోగిస్తారు.

అడ్వైజ్‌లు:అప్రమేయంగా, బ్యాక్‌గ్రౌండ్ ఇమేజ్‌న్‌ను ఎల్‌మెంట్‌ని ఎడమ మేరుబడికి మరియు అడుగున పైకి చేరుస్తారు మరియు వాటిని అడుగున మరియు ఎడమ దిశలో పునరావృతం చేస్తారు.

ఇన్‌స్టాన్స్

ఉదాహరణ 1

ఎలా y అక్షంపై బ్యాక్‌గ్రౌండ్ ఇమేజ్‌న్‌ను లొకేషన్ చేస్తారు:

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

亲自试一试

ఉదాహరణ 2

ఎలా బ్యాక్‌గ్రౌండ్ ఇమేజ్‌న్‌ను పైకి లొకేషన్ చేస్తారు:

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）或其他 సిఎస్ఎస్ యూనిట్స్.
ypos offset

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

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

单位可以是像素或其他 సిఎస్ఎస్ యూనిట్స్.
initial 将此属性设置为其默认值。参阅 initial.
inherit 从其父元素继承此属性。参阅 inherit.

సాంకేతిక వివరాలు

అప్రమేయ విలువ: 0%
పరివర్తనాత్మకత: ఏ
అనిమేషన్ తయారీ: మద్దతు పొందండి:అనిమేషన్ సంబంధిత గుణములు.
వెర్షన్: CSS3
JavaScript విధానం: object.style.backgroundPositionY="center"

బ్రౌజర్ మద్దతు

పట్టికలో ఉన్న సంఖ్యలు ఈ గుణమును పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ వెర్షన్ను పేర్కొంది.

చ్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఓపెరా
ఒక ముఖం విధానం 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 గుణము