কিভাবে CSS দিয়ে ব্যাকগ্রাউন্ড কালার পরিবর্তন করবেন

যেকোনো উদীয়মান ফ্রন্ট-এন্ড ডেভেলপারের ক্যারিয়ারের সবচেয়ে উত্তেজনাপূর্ণ মুহূর্তগুলির মধ্যে একটি হল একটি ওয়েব পেজের ব্যাকগ্রাউন্ড কালার পরিবর্তন করা।

এইচটিএমএল এর সাথে কাজ করা দারুণ এবং সব, কিন্তু সিএসএস এর মাত্র কয়েক লাইনের সাহায্যে আপনি আপনার পৃষ্ঠা তৈরি করতে পারেন, এবং আপনার প্রোগ্রামিং যাত্রা, জীবনে প্রস্ফুটিত হতে পারে।

---

---

এই গাইডটি CSS দিয়ে ব্যাকগ্রাউন্ড কালার কিভাবে পরিবর্তন করা যায় সে সম্পর্কে আপনার যা যা জানা দরকার তা কভার করবে।

সেট আপ করুন

একটু প্রাথমিক কাজ নক করা যাক।

ফেসবুক পেজ বনাম গ্রুপ প্রফেস কনস

বিঃদ্রঃ : আমি ব্যবহার করার পরামর্শ দিই ভিজ্যুয়াল স্টুডিও কোড সঙ্গে লাইভ সার্ভার এক্সটেনশন এইচটিএমএল এবং সিএসএস আপডেট করার সময় রিয়েল-টাইমে পরিবর্তন দেখতে।

1. আপনার প্রকল্পের ফাইলের জন্য একটি ফোল্ডার তৈরি করুন।
2. তৈরি একটি index.html আপনার HTML রাখার জন্য ফাইল। আপনি বয়লারপ্লেট কোড ব্যবহার করতে পারেন, অথবা কিছু সেট আপ করতে পারেন , , এবং ট্যাগ.
3. একটা তৈরি কর styles.css আপনার CSS এর জন্য ফাইল।
4. আপনার CSS ফাইলটি HTML এর সাথে স্থাপন করে লিঙ্ক করুন ভিতরে ট্যাগ.

এখন আপনি CSS সম্পাদনা শুরু করার জন্য প্রস্তুত।

সম্পর্কিত: কিভাবে একটি বয়লারপ্লেট ওয়েবসাইট তৈরি করবেন

---

---

কিভাবে CSS দিয়ে ব্যাকগ্রাউন্ড কালার পরিবর্তন করবেন

পটভূমির রঙ পরিবর্তন করার সবচেয়ে সহজ উপায় হল শরীর ট্যাগ তারপর, সম্পাদনা করুন পেছনের রঙ সম্পত্তি আপনি গুগল কালার পিকার ব্রাউজার এক্সটেনশানটি অনুসন্ধান এবং ব্যবহার করে রঙিন কোডগুলি খুঁজে পেতে পারেন

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


এই কোডটি পটভূমিকে একটি সুন্দর হালকা নীল রঙে পরিবর্তন করে।

---

---

দ্য পেছনের রঙ সম্পত্তি ছয়টি ভিন্ন রূপে রং গ্রহণ করে:

• নাম : লাইটস্কাইব্লু; (একটি ঘনিষ্ঠ অনুমানের জন্য)
• হেক্স কোড : # bfd6ff;
• আরজিবি : আরজিবি (191, 214, 255);
• rgba : rgba (191, 214, 255, 1); কোথায় প্রতি আলফা (অস্বচ্ছতা)
• এইচএসএল : hsl (218 °, 100%, 87%);
• এইচএসএলএ : hsla (218 °, 100%, 87%, 1); কোথায় প্রতি আলফা (অস্বচ্ছতা)

শর্টহ্যান্ড ব্যবহার করুন পটভূমি এর জায়গায় সম্পত্তি পেছনের রঙ অতিরিক্ত কোড কাটা। আপনি এই পদ্ধতি ব্যবহার করে যেকোন HTML উপাদানের পটভূমির রঙ পরিবর্তন করতে পারেন।

একটা তৈরি কর উপাদান এবং এটি একটি ক্লাস দিন this এই ক্ষেত্রে, ক্লাস হল প্যানেল । সেট করুন উচ্চতা এবং প্রস্থ CSS- এর বৈশিষ্ট্য। সিএসএস -এ উপাদান নির্বাচন করুন এবং রঙ করুন।

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;
}


এখানে আপনি দেখতে পারেন শরীর পটভূমি সম্পত্তি স্বাধীনভাবে স্টাইল করা হয় .panel পটভূমি সম্পত্তি

পটভূমি সম্পত্তি গ্রেডিয়েন্ট গ্রহণ করে:

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 বক্স-শ্যাডো দিয়ে বুস্ট করার চেষ্টা করুন। আপনার এইচটিএমএল এলিমেন্টগুলো কখনোই ভালো লাগেনি!

শেয়ার করুন শেয়ার করুন টুইট ইমেইল কিভাবে CSS বক্স-ছায়া ব্যবহার করবেন: 13 টি কৌশল এবং উদাহরণ

নরম বাক্সগুলি বিরক্তিকর দেখায়। সিএসএস বক্স-ছায়া প্রভাব দিয়ে তাদের স্প্রুস করুন!

পরবর্তী পড়ুন সম্পর্কিত বিষয়

• প্রোগ্রামিং
• ওয়েব ডেভেলপমেন্ট
• ওয়েব ডিজাইন
• সিএসএস

লেখক সম্পর্কে মার্কাস মিয়ার্স তৃতীয়(26 নিবন্ধ প্রকাশিত)

মার্কাস এমইওও -তে আজীবন প্রযুক্তি উৎসাহী এবং লেখক সম্পাদক। ট্রেন্ডিং টেক, গ্যাজেটস, অ্যাপস এবং সফটওয়্যার কভার করে তিনি ২০২০ সালে তার ফ্রিল্যান্স রাইটিং ক্যারিয়ার শুরু করেন। তিনি ফ্রন্ট-এন্ড ওয়েব ডেভেলপমেন্টের উপর মনোযোগ দিয়ে কলেজে কম্পিউটার সায়েন্স অধ্যয়ন করেন।

মার্কাস মিয়ার্স III থেকে আরো

আমাদের নিউজলেটার সদস্যতা

প্রযুক্তি টিপস, রিভিউ, ফ্রি ইবুক এবং এক্সক্লুসিভ ডিলের জন্য আমাদের নিউজলেটারে যোগ দিন!

সাবস্ক্রাইব করতে এখানে ক্লিক করুন