CSS background-position-y 属性

ਪਰਿਭਾਸ਼ਾ ਅਤੇ ਵਰਤੋਂ

background-position-y ਇਹ ਅਤਿਥੀ ਪ੍ਰਤੀਯੋਗੀ ਨੂੰ ਪਿਛਲੀ ਇਮੇਜ਼ ਦੇ ਵਿਆਪਕ ਅਕਸ਼ ਉੱਤੇ ਸੈਟ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ。

ਸੁਝਾਅ:ਮੂਲ ਰੂਪ ਵਿੱਚ, ਪਿਛਲੀ ਇਮੇਜ਼ ਇਲੈਕਟ੍ਰੋਨ ਦੇ ਉੱਪਰ ਅਤੇ ਉੱਚੇ ਅਤੇ ਪਿੱਛੇ ਦੀ ਦਿਸ਼ਾ ਵਿੱਚ ਪਾਇਆ ਜਾਵੇਗਾ, ਅਤੇ ਵਿਆਪਕ ਅਤੇ ਉੱਚੇ ਦੀ ਦਿਸ਼ਾ ਵਿੱਚ ਪਾਇਆ ਜਾਵੇਗਾ。

ਇਨਸਟੈਂਸ

ਉਦਾਹਰਣ 1

ਕਿਵੇਂ ਵਿਆਪਕ ਅਕਸ਼ ਉੱਤੇ ਪਿਛਲੀ ਇਮੇਜ਼ ਨੂੰ ਲਗਾਓ:

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

ਦੋ ਮੁੱਲ ਗਰੇਫਿਕ, ਸਿਰਫ਼ ਫਾਇਰਫਾਕਸ ਅਤੇ ਸਫਾਰੀ ਵਿੱਚ ਸਮਰੱਥ

  • ypos top ਜਾਂ bottom ਸੈਟ ਕਰੋ。
  • offset ਪਿੱਛੋਕਾ ਚਿੱਤਰ ਨੂੰ ypos ਸੈਟ ਕੀਤੇ ਗਏ ਉੱਪਰਲੇ ਜਾਂ ਨੀਚੇ ਦੀ ਸਿਧਾਂਤਕ ਪਰਿਧੀ ਦੀ ਉੱਚੀ ਪਰਿਧੀ ਦਾ ਵਾਧਾ ਹੈ。

ਇਕਾਈ ਪਿਕਸਲ (ਜਿਵੇਂ 0px) ਜਾਂ ਹੋਰ سی ایس ایس یونٹ.
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 ਲੋੜ