CSS کاسکیڈنگ اسٹائل شیٹس کا مخفف ہے۔ یہ ایک سادہ لیکن طاقتور ڈیزائن کی زبان ہے جس میں ویب صفحات کو تبدیل کرنے کی صلاحیت موجود ہے۔ آسان الفاظ میں ، یہ ویب صفحات کو پیش کرنے کے قابل بنانے اور صارفین کی مدد سے اپیل کرنے کے عمل کو ہموار کرتا ہے . اس آرٹیکل میں ، ہم سمجھیں گے کہ کس طرح سی ایس ایس میں مختلف پس منظر کی تصویر کو مندرجہ ذیل ترتیب میں لاگو کیا جائے:
ایک جھاڑو تیار کرنے والا کیا کرتا ہے
- سی ایس ایس پراپرٹیز میں پس منظر کی تصویر
- سی ایس ایس میں پس منظر کی تصویر
- پس منظر دہرائیں
- پس منظر کا منسلکہ
- پس منظر کی پوزیشن
- سی ایس ایس سائز میں پس منظر کی تصویر
- پس منظر کا رنگ
سی ایس ایس پراپرٹیز میں پس منظر کی تصویر
بہت ساری خصوصیات ہیں جو امیج کے طرز عمل اور پوزیشن کو کنٹرول کرنے کے ل. استعمال ہوتی ہیں۔ یہ خصوصیات ہیں:
- پس منظر کی تصویر
- پس منظر دہرائیں
- پس منظر منسلکہ
- پس منظر کی پوزیشن
- پس منظر کا سائز
- پس منظر کا رنگ
ہم ان خصوصیات میں سے ہر ایک سے واقف ہوں گے اور دیکھیں گے کہ کب اور کیسے انھیں کسی دلچسپ مظاہرے کے ساتھ استعمال کریں۔
سی ایس ایس میں پس منظر کی تصویر
پس منظر کی تصویر جیسا کہ نام سے پتہ چلتا ہے اس پراپرٹی کا استعمال صرف ایک ویب صفحہ میں موجود عنصر کے ذریعے پس منظر کی تصویر کی نشاندہی کرنے اور اسے سیٹ کرنے کے لئے کیا جاتا ہے۔ پہلے سے طے شدہ پس منظر کی تصویر کسی عنصر کے اوپری بائیں کونے میں رکھی جاتی ہے۔
نحو: پس منظر - امیج: یو آر ایل | کوئی نہیں | لکیری-میلان | ریڈیل-میلان
باڈی {پس منظر-تصویری: یو آر ایل ('apple.jpg')}یو آر ایل کا استعمال کرتے ہوئے پس منظر
آئیے پیرامیٹرز کو سمجھتے ہیں:
- یو آر ایل: اس پیرامیٹر کا ان پٹ ہمیں کسی بھی شبیہہ کے لئے فائل کا راستہ یا اس شبیہ کا یو آر ایل جس کی پس منظر کے طور پر سیٹ کرنے کی ضرورت ہے اس کی وضاحت کرنے کی اجازت دیتا ہے۔ ایک سے زیادہ تصویری اعلامیے کے ل the ، یو آر ایل کو کوما ڈیلیمیٹر کے ساتھ الگ کردیا گیا ہے۔
باڈی {پس منظر-تصویری: یو آر ایل ('apple.jpg')} 
- کوئی نہیں: یہ پراپرٹی کی ڈیفالٹ ویلیو ہے اور اگر اس کی ویلیو مخصوص ہو تو بیک گراؤنڈ امیج پیش نہیں کیا جاتا ہے۔
جسم {پس منظر: کوئی نہیں- لکیری-میلان (): پس منظر کی تصویر ایک لکیری میلان پر سیٹ کی گئی ہے۔ اس پراپرٹی کے لئے کم از کم کم از کم دو رنگ بتانے کی ضرورت ہے یعنی اوپر سے نیچے تک۔
باڈی {بیک گراؤنڈ رنگ: # 001 پس منظر-تصویری: لکیری-میلان (سفید 15٪ ، شفاف 16٪) ، لکیری-میلان (سفید 15٪ ، شفاف 16٪) پس منظر کا سائز: 60px 60px پس منظر کی پوزیشن: 0 0 ، 30px 30px}- ریڈیل - میلان (): پس منظر کی تصویر ایک شعاعی میلان پر سیٹ کی گئی ہے۔ اس پراپرٹی کے لئے کم از کم کم از کم دو رنگ بتانے کی ضرورت ہے یعنی مرکز سے کناروں کے لئے۔
باڈی {بیک گراؤنڈ رنگ: # 001 پس منظر - امیج: ریڈیل- میلان (سفید 15٪ ، شفاف 16٪) ، ریڈیل گراڈینٹ (سفید 15٪ ، شفاف 16٪) پس منظر کا سائز: 60px 60px پس منظر-پوزیشن: 0 0 ، 30px 30px}- بار بار لکیری-میلان (): یہ ایک لکیری میلان کو دہراتا ہے۔ آئیے وہی مثال استعمال کریں جو ہم نے اوپر لکیر grad تدریجی میں دوبارہ دیکھنے کے ل line لکیری گراڈینٹ میں دیکھا اور فرق دیکھیں۔
باڈی {بیک گراؤنڈ رنگ: # 001 پس منظر - امیج: دہرانا-لکیری-میلان (سفید 15٪ ، شفاف 16٪) ، بار بار لگانے والا لکیری-میلان (سفید 15٪ ، شفاف 16٪) پس منظر کا سائز: 60px 60px پس منظر کی پوزیشن : 0 0، 30px 30px}- دہرانے والا شعاعی میلان (): اس سے ایک شعاعی میلان دہرایا جاتا ہے ۔آپ وہی مثال ڈھونڈیں جس کو ہم اوپر ریڈیل میلان میں استعمال کرتے ہیں۔
باڈی {بیک گراؤنڈ رنگ: # 001 پس منظر - امیج: دہرائے ہوئے ریڈیل - میلان (سفید 15٪ ، شفاف 16٪) ، ریپیئل گراڈینٹ (سفید 15٪ ، شفاف 16٪) پس منظر کا سائز: 60px 60px پس منظر کی پوزیشن : 0 0، 30px 30px}فیل بیک بیک گراؤنڈ
یہ ہمیشہ ایک پیشہ ور ٹپ کے طور پر مشورہ دیا جاتا ہے کہ وہ بیک بیک آپشن کے طور پر پس منظر کا رنگ شامل کریں۔ یہ بچاؤ کے لئے آتا ہے خاص طور پر جب یا تو پس منظر کی تصاویر لوڈ نہیں ہوتی ہیں یا تدریجی پس منظر جو ہم نے مرتب کیا ہے اس میں کچھ پرانے براؤزرز کی سہولت نہیں ہوتی ہے جن پر دیکھا جاتا ہے۔
اس سے صارف کا تجربہ خراب نہیں ہوتا ہے اور اس طرح اعلان کیا جاسکتا ہے:
جسم {پس منظر: یو آر ایل (ایپل_لوسٹ.ج پی جی) گلابی}ایک سے زیادہ پس منظر
ہمارے پاس ایک سے زیادہ پس منظر کی تصاویر مرتب کرنے کا آپشن بھی ہے اور یہ زیادہ تر معاملات جیسے پیش منظر اور پس منظر کی تصویر کی ضرورت ہوتی ہے۔ یہاں شبیہہ کی ترتیب اہم ہے ، جو شبیہہ سامنے ہونا چاہئے پہلے اس کا اعلان کیا جاتا ہے ، اور جو شبیہ آخری میں ہونی چاہئے وہ اگلے ہی اعلان کی جاتی ہے۔
ذیل میں متعدد پس منظر کی تصاویر کی مثال ہے۔
باڈی {پس منظر-تصویری: یو آر ایل ('small-heart.jpg')، url ('background.jpg')}سیلز فورس سروس کلاؤڈ انٹرویو سوالات
پس منظر دہرائیں
پس منظر کی اعادہ والی جائیداد کو پس منظر کی شبیہہ کے ساتھ استعمال کیا جاتا ہے تاکہ کسی شبیہ کے اعادہ رویے کی وضاحت کی جاسکے۔ اس سے یہ معلوم ہوتا ہے کہ آیا اور کس طرح پس منظر کی شبیہہ دہرایا جائے گا۔ پہلے سے طے شدہ پس منظر کی تصویر کو عمودی اور افقی دونوں طرح دہرایا جاتا ہے۔
ممکن اقدار یہ ہیں:
- دہرائیں- شبیہہ افقی اور عمودی طور پر دونوں دہراتی ہے
- کوئی اعادہ - شبیہہ دہرا نہیں ہے
- repeat-x - شبیہہ افقی طور پر دہرائی جاتی ہے
- repeat-y - شبیہہ عمودی طور پر دہرائی جاتی ہے
- خلائی- تصویر کو بھی خالی جگہوں یا درمیان کے فرق کے ساتھ دہرائی جاتی ہے۔
- گول - اس تصویر کو بار بار دہراتے ہوئے ان کے مابین کسی خلیج کے علاقے کو بھرنے کے لئے بنایا گیا ہے۔
پس منظر دہرانے والی پراپرٹی کے لئے CSS نحو یہ ہے:
پس منظر دہرائیں: تکرار | تکرار x | تکرار-وائی | نو رپیٹ | اسپیس | گول
باڈی {پس منظر-امیج: یو آر ایل ('heart.png')، یو آر ایل ('background.png') بیک گراونڈ: ریپیٹ وائی ، ریپیٹ x بیک گراونڈ رنگ: # ففف}پس منظر کا منسلکہ
پس منظر منسلکہ پس منظر کی شبیہہ کے ساتھ پراپرٹی کا استعمال یہ بتانے کے لئے کیا جاتا ہے کہ آیا اسسٹال کو اسکرول ہونے کی وجہ سے اس تصویر کو سکرول کرنا چاہئے یا نہیں۔ اس سے یہ ظاہر ہوتا ہے کہ پس منظر کی تصویر کو درست ہونا چاہئے یا براؤزر ونڈو ویو سے متعلق دستاویزات کے ساتھ ساتھ اسکرول کرنا چاہئے۔ طے شدہ قیمت سکرول کرنا ہے۔
ممکن اقدار یہ ہیں:
- طومار - تصویر کے ساتھ ساتھ صفحہ بھی شامل ہیں۔
- فکسڈ - تصویر صفحے کے ساتھ ساتھ اسکرول نہیں ہوگی
پس منظر منسلکہ کے لئے CSS نحو یہ ہے:
پس منظر منسلکہ: طومار | طے شدہ
باڈی {پس منظر-تصویری: url ('heart.png')، url ('background.png') بیک گراونڈ: اسپیس ، گول}پس منظر کی پوزیشن
پس منظر کی پوزیشن پراپرٹی کا استعمال کسی پس منظر کی تصویر کے مقام یا مقام کی نشاندہی کرنے کے لئے ہوتا ہے۔ ممکن اقدار یہ ہیں:
- سب سے اوپر
- ٹھیک ہے
- نیچے
- بائیں
- مرکز
- ان اقدار کا مجموعہ (جیسے ، بائیں طرف)
پس منظر کی پوزیشن کے لئے سی ایس ایس کا نحو یہ ہے:
پس منظر کی پوزیشن: سب سے اوپر | دائیں | بائیں | نیچے | مرکز
باڈی {بیک گراؤنڈ امیج: یو آر ایل ('heart.png') بیک گراؤنڈ ری پیٹ: نون بار بار والے بیک گراونڈ منسلک: سکرول}سی ایس ایس سائز میں پس منظر کی تصویر
یہ پراپرٹی سب سے مفید ہے کیونکہ اس سے ہمیں پس منظر کی شبیہہ کے حجم کو کنٹرول کرنے کی سہولت ملتی ہے۔ اس پراپرٹی کے ساتھ ہم کام کرسکتے ہیں اور مختلف نتائج حاصل کرسکتے ہیں۔ پہلے سے طے شدہ قدر آٹو ہے۔
مندرجہ ذیل اقدار کو پس منظر کے سائز کے ساتھ استعمال کیا جاسکتا ہے۔
- آٹو
- تصویر کی لمبائی اور چوڑائی جیسے۔ 20px 40px۔
- فیصد کی اونچائی اور تصویر کی چوڑائی بطور فیصد w.r.t والدین عنصر جیسے۔ 50٪ 50٪۔
- مرکز- تصویر کو مرکز میں سیدھ میں لائیں
- پس منظر کے علاقے کے ذریعہ مکمل طور پر سرورق کا احاطہ کرنے کے لئے ، اسکیلنگ کریں۔
- اس کی اصل اونچائی اور چوڑائی تک فٹ ہونے کے ل sc ، اسکیلنگ پر مشتمل ہے۔
پس منظر کی پوزیشن کے لئے سی ایس ایس کا نحو یہ ہے:
پس منظر کا سائز: قدر
باڈی {پس منظر-تصویری: url ('heart.png')، url ('background.png') پس منظر - اعادہ: کوئی اعادہ ، پس منظر کا سائز: 400px 150px ، سرورق coverباڈی {پس منظر-تصویری: url ('heart.png')، url ('background.png') پس منظر - اعادہ: کوئی اعادہ نہیں ، بار بار پس منظر کا سائز: مشتمل ، 400px 150px}پس منظر کا رنگ
سی ایس ایس میں یہ تمام آسان خصوصیات کا اطلاق ہوتا ہے۔ اس صفحے کے پس منظر میں ٹھوس رنگوں کا اطلاق ہوتا ہے۔ اس خاصیت کی قیمت رنگوں (جیسے سرخ ، نیلے رنگ ، وغیرہ) ، ہیکس ویلیو اور آرجیبی ویلیو میں مخصوص کی جاسکتی ہے۔
پس منظر کے رنگ کے لئے CSS نحو یہ ہے:
پس منظر کا رنگ: قدر
C ++ مثال میں فنکشن اوورلوڈنگ
باڈی {بیک گراؤنڈ امیج: یو آر ایل (چھوٹے دل والے۔ جے پی جی) پس منظر کا رنگ: # 22a8e3}اس سے وہ تمام خصوصیات ختم ہوتی ہیں جو ہم پس منظر کے ساتھ استعمال کرسکتے ہیں۔ ہم ہمیشہ خصوصیات کے مختلف مرکب آزما سکتے ہیں جیسا کہ ہم نے اپنے مظاہرے میں دیکھا تھا۔
سی ایس ایس ضروری ہے اور ہر فرنٹ اینڈ ویب ڈویلپرز کے لئے مہارت حاصل کرنا ضروری ہے۔ یہ پس منظر کو ڈیزائن اور اسٹائل کرنے اور متاثر کن ویب سائٹس کی تشکیل اور صارف کے تجربے کو مزید تقویت دینے میں مدد کرتا ہے۔ سب سے بہتر یہ ہے کہ تجربہ کرتے رہیں اور اس خصوصی فرنٹ اینڈ ٹکنالوجی کا بھرپور فائدہ اٹھائیں کیونکہ یہ حیرت انگیز کام کرسکتا ہے اور متحرک طور پر صفحے کو تبدیل کرسکتا ہے۔
ہمارے چیک کریں جو انسٹرکٹر کی زیر قیادت براہ راست تربیت اور حقیقی زندگی کے منصوبے کے تجربے کے ساتھ آتا ہے۔ یہ تربیت آپ کو بیک اینڈ اور فرنٹ اینڈ ویب ٹیکنالوجیز کے ساتھ کام کرنے کی مہارت میں مہارت حاصل کرتی ہے۔ اس میں ویب ڈویلپمنٹ ، jQuery ، انجولر ، نوڈ جے ایس ، ایکسپریس جے ایس ، اور مونگو ڈی بی کی تربیت شامل ہے۔
ہمارے لئے ایک سوال ہے؟ براہ کرم 'سی ایس ایس میں پس منظر کی تصویر' بلاگ کے تبصرے سیکشن میں اس کا تذکرہ کریں اور ہم آپ کو واپس ملیں گے۔