CSS ਬਹੁਤਾਂਕਰ ਬੈਕਗਰਾਊਂਡ

ਇਸ ਚਾਪ ਵਿੱਚ ਤੁਸੀਂ ਸਿੱਖਣਗੇ ਕਿ ਕਿਵੇਂ ਬਹੁਤਾਂਕਰ ਬੈਕਗਰਾਊਂਡ ਇਮੇਜਜ਼ ਇੱਕ ਐਲੀਮੈਂਟ ਨੂੰ ਜੋੜੇ ਜਾਣ।

ਤੁਸੀਂ ਹੋਰ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵੀ ਸਿੱਖੋਗੇ:

  • background-size
  • background-origin
  • background-clip

CSS ਬਹੁਤਾਂਕਰ ਬੈਕਗਰਾਊਂਡ

CSS ਵਿੱਚ ਆਪਣੇ ਦੁਆਰਾ background-image ਵਿਸ਼ੇਸ਼ਤਾ ਇੱਕ ਐਲੀਮੈਂਟ ਨੂੰ ਬਹੁਤਾਂਕਰ ਬੈਕਗਰਾਊਂਡ ਇਮੇਜਜ਼ ਦੇ ਯੋਗ ਬਣਾਉਂਦੀ ਹੈ。

ਵੱਖ-ਵੱਖ ਬੈਕਗਰਾਊਂਡ ਇਮੇਜਜ਼ ਕੋਲੋਮ ਨਾਲ ਵੰਡੇ ਜਾਂਦੇ ਹਨ ਅਤੇ ਉਹ ਇੱਕ ਦੂਜੇ ਉੱਤੇ ਢਾਲੇ ਜਾਂਦੇ ਹਨ ਜਿਸ ਵਿੱਚ ਪਹਿਲਾ ਇਮੇਜਜ਼ ਦੇਖਣ ਵਾਲੇ ਨੂੰ ਨਜ਼ਰ ਆਉਂਦਾ ਹੈ。

ਹੇਠ ਦੇ ਉਦਾਹਰਣ ਵਿੱਚ ਦੋ ਬੈਕਗਰਾਊਂਡ ਇਮੇਜਜ਼ ਹਨ، ਪਹਿਲਾ ਇਮੇਜਜ਼ ਫੂਲ ਹੈ (ਨੀਚੇ ਅਤੇ ਦਾਹਿਨੇ ਨਾਲ ਜੋੜਿਆ ਗਿਆ) ਅਤੇ ਦੂਜਾ ਇਮੇਜਜ਼ ਪੇਪਰ ਬੈਕਗਰਾਊਂਡ ਹੈ (ਖੱਬੇ ਅਤੇ ਉੱਪਰ ਨਾਲ ਜੋੜਿਆ ਗਿਆ):

مثال

#example1 {
  background-image: url(flower.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

خود کو کچھ کریں

ਬਹੁਤਾਂਕਰ ਬੈਕਗਰਾਊਂਡ ਇਮੇਜ਼ ਇੱਕਲੇ ਬੈਕਗਰਾਊਂਡ ਵਿਸ਼ੇਸ਼ਤਾ (ਜਿਵੇਂ ਕਿ ਉੱਪਰ ਦੱਸਿਆ ਗਿਆ) ਜਾਂ background ਸਰਲ ਵਿਸ਼ੇਸ਼ਤਾ ਨਾਲ ਸੰਕੇਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ。

ਹੇਠ ਦੇ ਉਦਾਹਰਣ ਵਿੱਚ background ਸਰਲ ਵਿਸ਼ੇਸ਼ਤਾ (ਨਤੀਜਾ ਉੱਪਰੋਕਤ ਨਾਲ ਸਮਾਨ ਹੈ):

مثال

#example1 {
  background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

خود کو کچھ کریں

CSS ਬੱਗ ਕੰਮਰਤ

CSS background-size ਇਹ ਗੁਣ ਤੁਹਾਨੂੰ ਬੱਗ ਚਿੱਤਰ ਦਾ ਕੰਮਰਤ ਕੀਮਤ ਨਿਰਧਾਰਤ ਕਰਨ ਦੀ ਇਜਾਜਤ ਦਿੰਦਾ ਹੈ。

ਬੱਗ ਚਿੱਤਰ ਦਾ ਕੰਮਰਤ ਕੀਮਤ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਲੰਬਾਈ, ਪ੍ਰਤੀਸ਼ਤ ਜਾਂ ਹੇਠਲੇ ਦੋ ਕੀਮਤਾਂ ਵਿੱਚੋਂ ਕਿਸੇ ਨੂੰ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ:contain ਜਾਂ cover.

ਹੇਠਲੇ ਉਦਾਹਰਣ ਵਿੱਚ ਬੱਗ ਚਿੱਤਰ ਦਾ ਕੰਮਰਤ ਕੀਮਤ ਮੂਲ ਚਿੱਤਰ ਤੋਂ ਬਹੁਤ ਘੱਟ ਹੋਇਆ ਹੈ (ਪਿਕਸਲ ਦੇ ਰੂਪ ਵਿੱਚ):

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

ਇਹ ਕੋਡ ਹੈ:

مثال

#div1 {
  background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

خود کو کچھ کریں

background-size ਦੀਆਂ ਦੋ ਹੋਰ ਸੰਭਾਵਨਾਵਾਂ ਹਨ contain ਅਤੇ cover.

contain ਕੀਮਤਾਂ ਬੱਗ ਚਿੱਤਰ ਨੂੰ ਮੋਹਰੇ ਤੋਂ ਵੱਧ ਤੋਂ ਮੋਹਰੇ ਤੱਕ ਦਾ ਕੰਮਰਤ ਕਰਦੀਆਂ ਹਨ (ਪਰ ਇਸ ਦੀ ਚੌਡਾਈ ਅਤੇ ਉੱਚਾਈ ਕੰਮਰਤ ਖੇਤਰ ਨਾਲ ਬਰਾਬਰ ਹੋਣਗੇ)। ਇਸ ਤਰ੍ਹਾਂ, ਬੱਗ ਚਿੱਤਰ ਅਤੇ ਬੱਗ ਸਥਾਨ ਖੇਤਰ ਦੇ ਪ੍ਰਪੰਚ ਨਾਲ ਨਜਿੱਠਣ ਦੇ ਹਾਲਾਤ ਨਾਲ, ਕੁਝ ਬੱਗ ਖੇਤਰ ਬੱਗ ਚਿੱਤਰ ਨਾਲ ਢੁਕੇ ਨਹੀਂ ਹੋਣਗੇ。

cover ਕੀਮਤਾਂ ਬੱਗ ਚਿੱਤਰ ਨੂੰ ਸਕੇਲ ਕਰਦੀਆਂ ਹਨ ਤਾਕਿ ਬੱਗ ਖੇਤਰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਬੱਗ ਚਿੱਤਰ ਨਾਲ ਢੁਕੇ ਹੋਵੇ (ਇਸ ਦੇ ਚੌਡਾਈ ਅਤੇ ਉੱਚਾਈ ਕੰਮਰਤ ਖੇਤਰ ਨਾਲ ਬਰਾਬਰ ਹੋਣਗੇ ਜਾਂ ਉਸ ਤੋਂ ਵੱਧ ਹੋਣਗੇ)। ਇਸ ਤਰ੍ਹਾਂ, ਬੱਗ ਚਿੱਤਰ ਦੇ ਕੁਝ ਹਿੱਸੇ ਬੱਗ ਸਥਾਨ ਖੇਤਰ ਵਿੱਚ ਨਹੀਂ ਦੇਖੇ ਜਾਣਗੇ。

مثال زیر نمایش می‌دهد که: contain ਅਤੇ cover ਦੀ ਵਰਤੋਂ:

مثال

#div1 {
  background: url(img_flower.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}
#div2 {
  background: url(img_flower.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

خود کو کچھ کریں

ਕਈ ਪਿੱਨਬੱਗ ਚਿੱਤਰਾਂ ਦੇ ਕੰਮਰਤਾਂ ਦੀ ਕੰਮਰਤ ਮਾਪ ਦੇਣਾ

ਬਹੁਤੀਆਂ ਪਿੱਨਬੱਗ ਕੰਮਰਤਾਂ ਦੇ ਹੱਲ ਵਿੱਚ,background-size ਇਹ ਗੁਣ ਕਈ ਪਿੱਨਬੱਗ ਕੰਮਰਤਾਂ ਦੀਆਂ ਕੀਮਤਾਂ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ (ਕੋਮਾ ਨਾਲ ਵੰਡੇ ਸੂਚੀ)。

ਹੇਠਲੇ ਉਦਾਹਰਣ ਵਿੱਚ ਤਿੰਨ ਪਿੱਨਬੱਗ ਚਿੱਤਰਾਂ ਦੀ ਨਿਸ਼ਚਿਤ ਕੀਤੀ ਗਈ ਹੈ, ਹਰ ਪਿੱਨਬੱਗ ਕੋਲ ਵੱਖ ਵੱਖ background-size ਕੀਮਤਾਂ ਹਨ:

مثال

#example1 {
  background: url(tree.png) left top no-repeat, url(flower.gif) right bottom no-repeat, 
  	url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

خود کو کچھ کریں

تصویر پس‌زمینه تمام‌اندازه

اکنون، ما می‌خواهیم تصویر پس‌زمینه وب‌سایت همیشه تمام پنجره مرورگر را پوشش دهد.

درخواست خاص دقیق به شرح زیر است:

  • صفحه را با تصویر پر کنید (بدون فضای خالی)
  • تصویر را به اندازه نیاز بزرگ یا کوچک کنید
  • تصویر را در صفحه居中对齐 کنید
  • بدون ایجاد نوار پیمایش

مثال زیر روش انجام آن را نشان می‌دهد: از عنصر <html> استفاده کنید (<html> همیشه حداقل به اندازه高度的 پنجره مرورگر است). سپس پس‌زمینه ثابت و مرکزی را روی آن تنظیم کنید. در نهایت از خاصیت background-size اندازه آن را تنظیم کنید:

مثال

html {
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

خود کو کچھ کریں

Hero Image

شما همچنین می‌توانید از ویژگی‌های پس‌زمینه مختلف در <div> برای ایجاد Hero Image (تصویر بزرگ با متن) استفاده کنید و آن را در مکانی که می‌خواهید قرار دهید.

مثال

.hero-image {
  background: url(img_man.jpg) no-repeat center; 
  background-size: cover;
  height: 500px;
  position: relative;
}

خود کو کچھ کریں

CSS background-origin نمائش

CSS background-origin خصوصیت مکان تصویر پس‌زمینه را مشخص می‌کند.

این خاصیت سه مقدار متفاوت را می‌پذیرد:

  • border-box - تصویر پس‌زمینه از گوشه چپ بالا از frame شروع می‌کند
  • padding-box - تصویر پس‌زمینه از گوشه چپ بالا از لبه‌های padding شروع می‌کند (默认)
  • content-box - تصویر پس‌زمینه از گوشه چپ بالا از محتوای شروع می‌کند

مثال زیر نمایش می‌دهد که: background-origin خصوصیات:

مثال

#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(flower.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}

خود کو کچھ کریں

CSS background-clip نمائش

CSS background-clip خصوصیت محدوده نقاشی پس‌زمینه را مشخص می‌کند.

این خاصیت سه مقدار متفاوت را می‌پذیرد:

  • border-box - پس‌زمینه تا لبه‌های بیرونی frame نقاشی می‌شود (默认)
  • padding-box - پس‌زمینه تا لبه‌های فضای padding نقاشی می‌شود (默认)
  • content-box - پس‌زمینه در جعبه محتوای نقاشی می‌شود

مثال زیر نمایش می‌دهد که: background-clip خصوصیات:

مثال

#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}

خود کو کچھ کریں

CSS اعلیٰ پس منظر نمائش

نمائش وصف
background پس منظر کا تمام نمائش کچھ کرنا کا مختصر نمائش
background-clip پس منظر کا تراش کچھ کرنا
background-image ایک عنصر کے لئے ایک یا کئی پس منظر تصویر کچھ کرنا
background-origin پس منظر تصویر کی پوزیشن کچھ کرنا
background-size پس منظر تصویر کا حجم کچھ کرنا