یہ مطالعہ گائیڈ ظاہر کرے گا کہ سی ایس ایس کے ساتھ پس منظر کی تصاویر کو کیسے استعمال کیا جائے۔ تو، آئیے شروع کریں!
سی ایس ایس کے ساتھ ایک سے زیادہ پس منظر کی تصاویر کا استعمال کیسے کریں؟
سی ایس ایس ' پس منظر ” پراپرٹی ایک شارٹ ہینڈ پراپرٹی ہے جس میں بیک گراؤنڈ، بیک گراؤنڈ اٹیچمنٹ، کلپ، امیج، ریپیٹ، اصل، سائز اور پوزیشن کی خصوصیات شامل ہیں۔ بیک گراؤنڈ پراپرٹی کو متعدد امیجز کے یو آر ایل کی وضاحت کے لیے استعمال کیا جا سکتا ہے۔ پھر ان تصاویر کو پوزیشن میں رکھا جاتا ہے اور اس کے مطابق سیٹ کیا جاتا ہے۔
آئیے ایک مثال لیتے ہیں جس میں ایک div عنصر میں ویب صفحہ کے لوگو کے طور پر صرف ایک تصویر ہوتی ہے جبکہ دوسری میں تین تصاویر ہوتی ہیں۔
مثال: سی ایس ایس کے ساتھ ایک سے زیادہ پس منظر کی تصاویر شامل کرنا
HTML میں، لوگو کے لیے ایک div عنصر شامل کریں اور کلاس کا نام بتائیں۔ مثال کے طور پر، ہم نے اس کا نام ' لوگو ' دوسرا div متعدد امیجز استعمال کرتا ہے، اس لیے ہم نے اس کا نام ' متعدد تصاویر ' تاہم، آپ اپنی ترجیحات کے مطابق کلاس کا نام بتا سکتے ہیں۔
ایچ ٹی ایم ایل
< div کلاس = 'لوگو' >< / div >< div کلاس = 'متعدد تصاویر' >< / div >
اگلے حصے میں، ہم CSS پس منظر کی خاصیت کا استعمال کرتے ہوئے تصاویر کو ایڈجسٹ کریں گے۔
طرز 'لوگو' div
لوگو {چوڑائی : 100% ;
اونچائی : 50px ;
بھرتی : 5px ;
مارجن : 5px ;
پس منظر کا سائز : 100px ;
پس منظر دوبارہ : دوبارہ نہیں ;
پس منظر کی تصویر : یو آر ایل ( images/linux-logo.png ) ;
}
کلاس کے ساتھ div عنصر ' لوگو مندرجہ ذیل خصوصیات کے ساتھ لاگو کیا جاتا ہے:
- ' چوڑائی 'پراپرٹی کا استعمال عنصر کی چوڑائی کو سیٹ کرنے کے لیے کیا جاتا ہے' 100% '
- ' اونچائی 'پراپرٹی عنصر کی اونچائی کو مقرر کرنے کے لئے استعمال کیا جاتا ہے' 50px '
- ' بھرتی 'پراپرٹی کو سیٹ کرنے کے لیے استعمال کیا جاتا ہے' 5px عنصر کے مخصوص مواد کے ارد گرد جگہ۔
- ' مارجن ' جائیداد کو ترتیب دینے کے لیے استعمال کیا جاتا ہے ' 5px عنصر کے ارد گرد جگہ۔
- ' پس منظر کا سائز 'پراپرٹی عنصر کے پس منظر کی تصویر کا سائز سیٹ کرتی ہے' 100px '
- ' پس منظر دوبارہ 'قیمت کے ساتھ' دوبارہ نہیں ” پس منظر صرف ایک بار دکھاتا ہے۔
- ' پس منظر کی تصویر امیج کا استعمال امیج کے یو آر ایل کی وضاحت کے لیے کیا جاتا ہے۔
اسٹائل 'متعدد امیجز' div
.متعدد تصاویر {چوڑائی : 90% ;
اونچائی : 45 وی ایچ ;
مارجن : 1px آٹو ;
بھرتی : 20px ;
پس منظر کا سائز : 150px ;
پس منظر کا رنگ : آر جی بی ( 157 , 154 , 151 ) ;
پس منظر کی تصویر : یو آر ایل ( images/office.png ) , یو آر ایل ( images/html.png ) , یو آر ایل ( images/laptop.png ) ;
پس منظر دوبارہ : دوبارہ نہیں , دوبارہ نہیں , دوبارہ نہیں ;
پس منظر کی پوزیشن : بائیں , مرکز , صحیح ;
}
اب، دوسرے کنٹینر کو اس طرح سٹائل کریں:
- ' پس منظر کا رنگ پراپرٹی عنصر کے پس منظر کا رنگ بتاتی ہے۔
- ' پس منظر کی تصویر ” پراپرٹی متعدد تصویری یو آر ایل کی وضاحت کرتی ہے۔
- ' پس منظر دوبارہ ” پراپرٹی پس منظر کی امیج پراپرٹی میں متعین امیجز کی ترتیب میں امیجز کے لیے قدریں سیٹ کرتی ہے۔ دونوں تصاویر کو نان ریپیٹ کے طور پر سیٹ کیا گیا ہے یعنی وہ براؤزر پر صرف ایک بار دکھائی دیں گی۔
- ' پس منظر کی پوزیشن ” پس منظر کی تصویر کی خاصیت کے ذریعہ متعین کردہ تصاویر کی ترتیب میں تصویر کی پوزیشن کو ایڈجسٹ کرتا ہے۔ پہلی تصویر بائیں جانب، دوسری درمیان میں اور تیسری دائیں جانب رکھی جائے گی۔
اوپر فراہم کردہ کوڈ فراہم کرنے سے، براؤزر میں نتیجہ اس طرح نظر آئے گا:
اس طرح، ہم سی ایس ایس کے ساتھ متعدد امیجز کی پوزیشن کو ایڈجسٹ کر سکتے ہیں۔
نتیجہ
ایپلیکیشن کو دل لگی اور انٹرایکٹو بنانے کے لیے، ڈویلپر مختلف تصاویر اور رنگ استعمال کرتے ہیں۔ ہم سی ایس ایس پس منظر کی خصوصیات کے ساتھ ایک سے زیادہ تصاویر ترتیب دے سکتے ہیں، جیسے کہ بیک گراؤنڈ پوزیشن، بیک گراؤنڈ ریپیٹ، بیک گراؤنڈ سائز وغیرہ۔ اس دستی نے سی ایس ایس مثالوں کے ساتھ متعدد پس منظر کی تصاویر کے استعمال کو ظاہر کیا ہے۔