CSS background-position-x ਪ੍ਰਾਪਰਟੀ

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

background-position-x ਪ੍ਰਤੀਯੋਗਿਤਾ ਪ੍ਰਤੀਯੋਗਿਤਾ ਦੇ ਬੈਕਗਰਾਊਂਡ ਚਿੱਤਰ ਨੂੰ ਪਿਕਸਲ ਵਿੱਚ ਸਥਾਨਿਕਤਾ ਕਰੋ。

ਸੁਝਾਅ:ਮੂਲ ਰੂਪ ਵਿੱਚ, ਬੈਕਗਰਾਊਂਡ ਚਿੱਤਰ ਏਜੰਟ ਦੇ ਉੱਪਰੋਕਤ ਹੋਰ ਢਾਂਚੇ ਵਾਲੇ ਸਥਾਨ ਵਿੱਚ ਰੱਖਿਆ ਜਾਂਦਾ ਹੈ ਅਤੇ ਉੱਚੇ ਅਤੇ ਪਿੱਛੇ ਦੋਵੇਂ ਦਿਸ਼ਾਵਾਂ ਵਿੱਚ ਪਾਰਟੀਕਲਰ ਹੁੰਦਾ ਹੈ。

ਇੰਸਟੈਂਸ

ਉਦਾਹਰਣ 1

ਕਿਵੇਂ ਆਕਾਰ ਦੇ ਪਿਕਸਲ ਨੂੰ ਬੈਕਗਰਾਊਂਡ ਚਿੱਤਰ ਵਿੱਚ ਸਥਾਨਿਕਤਾ ਕਰਨਾ ਹੈ:

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

ਸਵੈਂ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 2

ਕਿਵੇਂ ਬੈਕਗਰਾਊਂਡ ਚਿੱਤਰ ਨੂੰ ਦੱਖਣ ਵੱਲ ਸਥਾਨਿਕਤਾ ਕਰਨਾ ਹੈ:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: right;
}

ਸਵੈਂ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 3

ਪ੍ਰਤੀਯੋਗਿਤਾ ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਾਲੇ ਬੈਕਗਰਾਊਂਡ ਚਿੱਤਰ ਕਿਵੇਂ ਸਥਾਨਿਕਤਾ ਕਰਨਾ ਹੈ:

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

ਸਵੈਂ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 4

ਪਿਕਸਲ ਸਥਾਨਿਕਤਾ ਵਾਲੇ ਬੈਕਗਰਾਊਂਡ ਚਿੱਤਰ ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: 150px;
}

ਸਵੈਂ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 5

ਵੱਖ-ਵੱਖ ਬੈਕਗਰਾਊਂਡ ਪ੍ਰਤੀਯੋਗਿਤਾਵਾਂ ਨਾਲ ਇੱਕ ਉੱਪਰਲੇ ਢਾਂਚੇ ਵਾਲੇ ਬੈਕਗਰਾਊਂਡ ਚਿੱਤਰ ਬਣਾਓ:

.hero-image {
  background-image: url("photographer.jpg"); /* 使用的图像 */
  background-color: #cccccc; /* ਚਿੱਤਰ ਨਾ ਹੋਣ ਤਾਂ ਇਹ ਰੰਗ ਵਰਤੋਂ ਕਰੋ */
  height: 300px; /* ਹਾਈਟ ਸੈਟ ਕਰੋ */
  background-position-x: center; /* ਚਿੱਤਰ ਨੂੰ ਕੇਂਦਰ ਵਿੱਚ ਸਥਾਪਿਤ ਕਰੋ */
  background-repeat: no-repeat; /* ਚਿੱਤਰ ਨੂੰ ਅਨਾਵਰਤਿਤ ਕਰੋ */
  background-size: cover; /* ਪਿੱਨਾ ਚਿੱਤਰ ਦਾ ਮੋਟਾਈ ਸਾਰੇ ਕੰਟੇਨਰ ਨੂੰ ਕਵਰ ਕਰਨ ਲਈ ਸੈਟ ਕਰੋ */
}

ਸਵੈਂ ਪ੍ਰਯੋਗ ਕਰੋ

CSS ਭਾਸ਼ਾਈ

background-position-x: value;

value

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਬਰਾਉਜ਼ਰ ਸਮਰੱਥਾ

ਸਾਰੇ ਤੇਲਬਿਹਾਰੀ ਅੰਕ ਇਹ ਪਹਿਲੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਇਸ ਪ੍ਰਤੀਯੋਗਿਤਾ ਨੂੰ ਸਮਰੱਥ ਬਰਾਉਜ਼ਰ ਵਰਜਨ ਦਿਸਾਈ ਹਨ。

ਸਬੰਧਤ ਪੰਨੇ

ਸਿੱਖਿਆ ਮੁੱਦਾ:CSS ਪਿੱਛੋਕੜ

CSS ਭਾਸ਼ਾਈ ਸੂਚੀਕਰਨ:background-image ਪ੍ਰਤੀਯੋਗਿਤਾ

CSS ਭਾਸ਼ਾਈ ਸੂਚੀਕਰਨ:background-position ਪ੍ਰਤੀਯੋਗਿਤਾ

CSS ਭਾਸ਼ਾਈ ਸੂਚੀਕਰਨ:background-position-y ਪ੍ਰਤੀਯੋਗਿਤਾ

HTML DOM ਭਾਸ਼ਾਈ ਸੂਚੀਕਰਨ:backgroundPosition ਪ੍ਰਤੀਯੋਗਿਤਾ