আমার কাছে সবচেয়ে সাধারণ CSS প্রশ্নগুলির মধ্যে একটি হল CSS-এ পটভূমি এবং পটভূমি-রঙের মধ্যে পার্থক্য কী? এটি বিভ্রান্তিকর হওয়ার কারণ হল আপনি প্রায়ই ডেভেলপারদের background-color ব্যবহার করতে দেখেন এবং background বিনিময়যোগ্যভাবে যখন তারা একটি উপাদানে পটভূমির রঙ প্রয়োগ করে।
কিন্তু তারা একই নয়। background (-রঙ ছাড়া) সম্পত্তি পারি সমস্ত সেট করতে ব্যবহার করা হবে একটি ঘোষণায় একটি উপাদানের জন্য পটভূমি বৈশিষ্ট্য। উদাহরণস্বরূপ, আপনি একটি পটভূমির রঙ, একটি চিত্র যা একবার প্রদর্শিত হয় (পুনরাবৃত্তি নয়) এবং একটি একক ঘোষণায় একটি উপাদানে একটি চিত্র অবস্থান উভয়ই যোগ করতে চাইতে পারেন, যেমন:
background: #444 url("image.jpg) no-repeat left top;উপরেরটি এভাবেও লেখা যেতে পারে:
background-image: url(“url/image.jpg”);
background-repeat: no-repeat;
background-position-x: left;
background-position-y: top;
background-color: #444;
তাই background সম্পত্তি একটি সুবিধাজনক শর্ট-হ্যান্ড হিসাবে ব্যবহার করা যেতে পারে যা এক লাইনে একাধিক ঘোষণা প্রয়োগ করতে পারে এবং আপনাকে অনেক লাইন কোড সংরক্ষণ করতে পারে।
ঘোষণা =CSS সম্পত্তি + মান।
background-color অন্য দিকে, সম্পত্তি শুধুমাত্র পটভূমি রঙ সেট করতে পারে একটি উপাদানের। এটি বড় background একটি উপসেটের (একটি অংশ) মত সম্পত্তি।
গুরুত্বপূর্ণ:পটভূমি সম্পত্তি পূর্ববর্তী সমস্ত ঘোষণা পুনরায় সেট করবে — সতর্ক থাকুন !
আপনি যদি আগে কোনো উপাদানে বিভিন্ন পটভূমি ঘোষণা প্রয়োগ করে থাকেন, যেমন background-color অথবা background-image , এবং তারপরে পরে একটি background: red যোগ করুন একই উপাদানের ঘোষণা, আপনার পূর্ববর্তী সমস্ত ঘোষণা পুনরায় সেট করা হবে, এবং এখন আপনার উপাদানটির পটভূমি লাল, এবং আপনার পটভূমির ছবি চলে গেছে৷
উদাহরণ
এই পেনের উদাহরণটি একবার দেখুন, যেখানে আমাদের তিনটি div আছে একই .box সহ উপাদান ক্লাস প্রথম উপাদানটিতে শুধুমাত্র .box আছে ক্লাস কিন্তু অন্যদেরও .bg-red এর একটি ইউটিলিটি (হেল্পার) ক্লাস আছে এবং .bg-blue যথাক্রমে।
কোডপেনের উদাহরণ দেখুন।
একটি পার্থক্য লক্ষ্য করুন?
দ্বিতীয় বাক্সটি সম্পূর্ণ লাল, কোনো ছবি নেই, যদিও এটি .box ক্লাস স্পষ্টভাবে উল্লেখ করে যে এটিতে অন্য দুটি উপাদানের মতো একই JS চিত্র থাকা উচিত।
HTML
<div class="box">
</div>
<div class="box bg-red">
</div>
<div class="box bg-blue">
</div>CSS
.box {
margin: 1rem;
height: 100px;
width: 150px;
background-color: black;
background-image: url("https://techstacker.com/static/placeholder-thumbnail-javascript-322632ee75bc4a676b0b067b31eaf969.svg");
background-repeat: no-repeat;
}
.bg-red {
background: red;
}
.bg-blue {
background-color: blue;
}
CSS-কে ঘনিষ্ঠভাবে দেখুন এবং .bg-red তুলনা করুন এবং .bg-blue বৈশিষ্ট্য লাল শ্রেণীটি 'মাস্টার' (অল-ইন-ওয়ান) background ব্যবহার করে লাল রঙের মান সেট করার জন্য সম্পত্তি, যেখানে নীল শ্রেণী একক-উদ্দেশ্য background-color ব্যবহার করে .
background .bg-red এ সম্পত্তি ক্লাস দ্বিতীয় ডিভ এলিমেন্টের প্রতিটি অন্য ব্যাকগ্রাউন্ড ডিক্লেয়ারেশনকে সরিয়ে দেয়:এখানে -image , -repeat , -color এবং তারপর নির্দিষ্ট red যোগ করে সেই উপাদানটির জন্য একক ব্যাকগ্রাউন্ড অ্যাট্রিবিউট হিসেবে মান।
সুতরাং, আপনি যদি শুধুমাত্র প্রভাব করতে চান নির্দিষ্ট উপাদানের পটভূমির রং, নিশ্চিত করুন যে আপনি background-color ব্যবহার করছেন , না background অথবা আপনি সেই উপাদানের পূর্ববর্তী কোনো পটভূমি- ঘোষণাগুলিকে ওভাররাইট করবেন।
কখনও কখনও, রিসেট করা হচ্ছে৷ সমস্ত পূর্ববর্তী ঘোষণা ঠিক আপনি কি করতে চান হতে পারে. আপনি এমন একটি ওয়েবসাইটে কাজ করতে পারেন যেখানে একগুচ্ছ লিগ্যাসি কোড রয়েছে যা আপনাকে স্পর্শ করার অনুমতি নেই (বা হাহাহা করতে চান) কিন্তু আপনি এমন একটি নির্দিষ্ট উপাদান ম্যানিপুলেট করতে চান যার ইতিমধ্যেই একগুচ্ছ ঘোষণা রয়েছে যা আপনাকে একটি দিয়ে প্রতিস্থাপন করতে হবে নতুন একবচন ঘোষণার মান, যেমন রঙ — এর জন্য, background ব্যবহার করে একটি চমৎকার টুল।
