سی ایس ایس کے ساتھ پس منظر کا رنگ کیسے تبدیل کیا جائے۔

کسی بھی ابھرتے ہوئے فرنٹ اینڈ ڈویلپر کے کیریئر میں سب سے زیادہ دلچسپ لمحات میں سے ایک ویب پیج کے پس منظر کا رنگ تبدیل کرنا سیکھنا ہے۔

ایچ ٹی ایم ایل کے ساتھ کام کرنا بہت اچھا اور سب کچھ ہے ، لیکن سی ایس ایس کی صرف چند لائنوں کی مدد سے آپ اپنے صفحات ، اور اپنے پروگرامنگ کا سفر ، زندگی میں کھل سکتے ہیں۔

یہ گائیڈ ہر اس چیز کا احاطہ کرے گا جس کے بارے میں آپ کو جاننے کی ضرورت ہے کہ CSS کے ساتھ پس منظر کا رنگ کیسے تبدیل کیا جائے۔

سیٹ اپ حاصل کریں۔

آئیے تھوڑا سا ابتدائی کام ختم کردیں۔

آپ ایکسل میں دو کالموں کو کیسے جوڑتے ہیں؟

نوٹ : میں استعمال کرنے کی سفارش کرتا ہوں۔ بصری اسٹوڈیو کوڈ کے ساتہ براہ راست سرور کی توسیع۔ ریئل ٹائم میں تبدیلیاں دیکھنے کے لیے جب آپ HTML اور CSS کو اپ ڈیٹ کرتے ہیں۔

اپنے پروجیکٹ کی فائلوں کے لیے ایک فولڈر بنائیں۔
ایک بنائیں۔ index.html اپنے HTML کو رکھنے کے لیے فائل۔ آپ بوائلر پلیٹ کوڈ استعمال کرسکتے ہیں ، یا صرف کچھ سیٹ اپ کرسکتے ہیں۔ ، ، اور ٹیگز.
بنائیے ایک styles.css اپنے سی ایس ایس کے لیے فائل.
رکھ کر اپنی CSS فائل کو HTML کے ساتھ جوڑیں۔ کے اندر ٹیگز.

اب آپ سی ایس ایس میں ترمیم شروع کرنے کے لیے تیار ہیں۔

سی ایس ایس کے ساتھ پس منظر کا رنگ کیسے تبدیل کیا جائے۔

پس منظر کا رنگ تبدیل کرنے کا آسان طریقہ یہ ہے کہ جسم ٹیگ. پھر ، میں ترمیم کریں۔ پس منظر کا رنگ جائیداد آپ گوگل کلر چننے والے براؤزر ایکسٹینشن کو تلاش کرکے اور استعمال کرکے رنگین کوڈز تلاش کرسکتے ہیں۔

body {  
 background-color: rgb(191, 214, 255);  
}

یہ کوڈ پس منظر کو ہلکے نیلے رنگ میں بدل دیتا ہے۔

کی پس منظر کا رنگ پراپرٹی رنگوں کو چھ مختلف شکلوں میں قبول کرتی ہے۔

نام : بلیو بلیو؛ (قریب قریب کے لیے)
ہیکس کوڈ : # bfd6ff
آر جی بی : آر جی بی (191 ، 214 ، 255)
آر جی بی اے : آر جی بی اے (191 ، 214 ، 255 ، 1) کہاں کو الفا ہے (دھندلاپن)
ایچ ایس ایل۔ : ایچ ایس ایل (218 ° ، 100، ، 87)
ایچ ایس ایل اے : hsla (218 ° ، 100، ، 87، ، 1) کہاں کو الفا ہے (دھندلاپن)

شارٹ ہینڈ استعمال کریں۔ پس منظر کی جگہ پراپرٹی پس منظر کا رنگ اضافی کوڈ کاٹنے کے لیے۔ آپ اس طریقہ کار کا استعمال کرتے ہوئے کسی بھی HTML عنصر کے پس منظر کا رنگ تبدیل کر سکتے ہیں۔

بنائیے ایک عنصر اور اسے ایک کلاس دیں this اس معاملے میں ، کلاس ہے۔ پینل . اسے سیٹ کریں۔ اونچائی اور چوڑائی سی ایس ایس میں خصوصیات سی ایس ایس میں عنصر منتخب کریں اور رنگ کو دور کریں۔

body {  
 background-color: rgb(191, 214, 255);  
}  
.container{  
 display: flex;  
 justify-content: center;  
 align-items: center;  
 height: 90vh;  
}  
.panel {  
 background: rgb(255, 148, 148);  
 height: 10rem;  
 width: 30%;  
}  
.muo-text {  
 font-size: 3em;  
 font-weight: bolder;  
 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;  
 position: absolute;  
}

یہاں آپ دیکھ سکتے ہیں جسم پس منظر پراپرٹی اسٹائل سے آزاد ہے۔ پینل پس منظر جائیداد

پس منظر کی جائیداد بھی میلان کو قبول کرتی ہے:

body {  
 background: linear-gradient(90deg, rgba(234,233,255,1) 0%, rgba(252,167,213,1) 35%, rgba(194,245,255,1) 100%);  
}

CSS میں بیک گراؤنڈ امیج کو کیسے تبدیل کیا جائے۔

اگر آپ چاہتے ہیں کہ پس منظر ایک ٹھوس رنگ یا میلان کے بجائے تصویر بن جائے۔ شارٹ ہینڈ۔ پس منظر جائیداد ایک واقف دوست ہے۔

اس بات کو یقینی بنائیں کہ تصویر اسی فولڈر میں ہے جیسے آپ کی HTML اور CSS فائلیں۔ بصورت دیگر آپ کو صرف نام کے بجائے قوسین کے اندر فائل کا راستہ استعمال کرنا پڑے گا:

body {  
 background: url(leaves-and-trees.jpg)  
}

واہ! لگتا ہے کہ تصویر بہت زیادہ زوم ہے۔ آپ اسے کے ساتھ ٹھیک کر سکتے ہیں۔ پس منظر کا سائز جائیداد

body {  
 background: url(leaves-and-trees.jpg);  
 background-size: cover;  
}

شارٹ ہینڈ استعمال کرنے کے لیے۔ پس منظر کے ساتھ مل کر جائیداد پس منظر کا سائز جائیداد کور ، آپ کو بھی وضاحت کرنی ہوگی۔ پس منظر کی پوزیشن خصوصیات اور بیک سلیش کے ساتھ اقدار کو الگ کریں۔ (یہاں تک کہ اگر وہ ڈیفالٹ پوزیشنل اقدار ہیں جیسے۔ سب سے اوپر بائیں .)

body {  
 background: url(leaves-and-trees.jpg) top left / cover;  
}

تم وہاں جاؤ! سی ایس ایس کی ایک لائن میں مناسب سائز کے پس منظر کی تصویر۔

مزید پڑھ: CSS میں بیک گراؤنڈ امیج کیسے سیٹ کریں

نوٹ : پس منظر کی بڑی تصاویر کو شامل کرنے سے ہوشیار رہیں جو کہ ذخیرہ کرنے کی کافی جگہ لیتی ہیں۔ یہ موبائل پر لوڈ کرنا مشکل ہوسکتا ہے ، جہاں آپ کے پاس دو سیکنڈ ہوتے ہیں تاکہ صارفین کو صفحے پر رہنے کی وجہ بتائیں۔

CSS باکس شیڈو کے ساتھ اپنا CSS گیم اپ کریں۔

اپنے جیسے ڈویلپر کے لیے ، بیک گراؤنڈ کلر اور بیک گراؤنڈ امیج پراپرٹیز پرانی خبریں ہیں۔ خوش قسمتی سے ، ہمیشہ کچھ نیا سیکھنے کو ملتا ہے۔

اپنے خانوں کو سی ایس ایس باکس شیڈو کے ساتھ فروغ دینے کی کوشش کریں۔ آپ کے ایچ ٹی ایم ایل عناصر کبھی بہتر نہیں لگے!

بانٹیں بانٹیں ٹویٹ ای میل۔ سی ایس ایس باکس شیڈو کا استعمال کیسے کریں: 13 چالیں اور مثالیں۔

بلینڈ بکس بورنگ لگتے ہیں۔ سی ایس ایس باکس شیڈو اثر کے ساتھ ان کو تیز کریں!

اگلا پڑھیں۔ متعلقہ موضوعات۔

پروگرامنگ۔
ویب سازی
ویب ڈیزائن
سی ایس ایس

مصنف کے بارے میں مارکس میئرز III۔(26 مضامین شائع ہوئے)

مارکس MUO میں زندگی بھر ٹیکنالوجی کے شوقین اور رائٹر ایڈیٹر ہیں۔ اس نے 2020 میں اپنے فری لانس کیریئر کا آغاز کیا ، جس میں ٹرینڈنگ ٹیک ، گیجٹ ، ایپس اور سافٹ وئیر شامل ہیں۔ اس نے فرنٹ اینڈ ویب ڈویلپمنٹ پر توجہ کے ساتھ کالج میں کمپیوٹر سائنس کی تعلیم حاصل کی۔

مارکس میئرز III سے مزید

ہماری نیوز لیٹر کو سبسکرائب کریں

ٹیک ٹپس ، جائزے ، مفت ای بکس ، اور خصوصی سودوں کے لیے ہمارے نیوز لیٹر میں شامل ہوں!

سبسکرائب کرنے کے لیے یہاں کلک کریں۔