সিএসএস হ'ল ক্যাসকেডিং স্টাইল শীটগুলির সংক্ষিপ্ত রূপ। এটি একটি সরল অথচ শক্তিশালী ডিজাইনের ভাষা যা ওয়েব পৃষ্ঠাগুলি রুপান্তর করার ক্ষমতা রাখে। সহজ কথায়, এটি ওয়েব পৃষ্ঠাগুলি উপস্থাপনযোগ্য করার প্রক্রিয়াটিকে প্রবাহিত করে এবং এর সাহায্যে ব্যবহারকারীদের কাছে আবেদন করে । এই নিবন্ধে, আমরা নিম্নলিখিত ক্রমে সিএসএসে বিভিন্ন পটভূমি চিত্রটি কীভাবে প্রয়োগ করতে হবে তা বুঝতে পারি:
- সিএসএস বৈশিষ্ট্যে পটভূমি চিত্র
- সিএসএসে পটভূমি চিত্র
- পটভূমি পুনরাবৃত্তি
- পৃষ্ঠভূমি সংযুক্তি
- পটভূমি অবস্থান
- সিএসএস আকারে পটভূমি চিত্র
- পেছনের রং
সিএসএস বৈশিষ্ট্যে পটভূমি চিত্র
অনেকগুলি বৈশিষ্ট্য রয়েছে যা ব্যবহার করে এবং চিত্রটির অবস্থান এবং অবস্থান নিয়ন্ত্রণ করে। এই বৈশিষ্ট্যগুলি হ'ল:
- পটভূমি চিত্র
- পটভূমি পুনরাবৃত্তি
- পৃষ্ঠভূমি সংযুক্তি
- পটভূমি অবস্থান
- পটভূমি আকার
- পেছনের রং
আমরা এই বৈশিষ্ট্যগুলির প্রত্যেকটির সাথে পরিচিত হতে পারি এবং কখন এবং কীভাবে কিছু আকর্ষণীয় বিক্ষোভের মাধ্যমে সেগুলি ব্যবহার করব তা দেখব।
সিএসএসে পটভূমি চিত্র
দ্য পটভূমি চিত্র নাম অনুসারে সম্পত্তিটি কেবল ওয়েব-পৃষ্ঠায় কোনও উপাদানটির মাধ্যমে পটভূমি চিত্রটি নির্দেশ করতে এবং সেট করতে ব্যবহৃত হয়। ডিফল্টরূপে একটি পটভূমি চিত্র একটি উপাদানের উপরের-বাম কোণে স্থাপন করা হয়।
বাক্য গঠন: পটভূমি-চিত্র: url | কোনও | লিনিয়ার-গ্রেডিয়েন্ট | রেডিয়াল-গ্রেডিয়েন্ট
দেহ {পটভূমি-চিত্র: url ('আপেল.জপিজি')}ইউআরএল ব্যবহার করে পটভূমি
আসুন প্যারামিটারগুলি বুঝতে পারি:
- ইউআরএল: এই প্যারামিটারের ইনপুট আমাদের যে কোনও চিত্রের একটি ফাইল পাথ বা চিত্রটির ইউআরএল, যা ব্যাকগ্রাউন্ড হিসাবে সেট করা দরকার তা নির্দিষ্ট করতে দেয়। একাধিক চিত্র ঘোষণার জন্য, ইউআরএল একটি কমা সীমানা দিয়ে পৃথক করা হয়েছে।
দেহ {পটভূমি-চিত্র: url ('আপেল.জপিজি')} 
জাভা একীকরণ কি
- কোনটি নয়: এটি সম্পত্তির ডিফল্ট মান এবং এর মান নির্দিষ্ট করা থাকলে কোনও পটভূমি চিত্র উপস্থাপন করা হয় না।
দেহ {পটভূমি: কিছুই নয়- রৈখিক-গ্রেডিয়েন্ট (): পটভূমি চিত্রটি একটি রৈখিক গ্রেডিয়েন্টে সেট করা আছে। এই সম্পত্তিটির জন্য নূন্যতম কমপক্ষে দুটি রঙ নির্দিষ্ট করা প্রয়োজন, উপরে থেকে নীচে পর্যন্ত।
বডি {ব্যাকগ্রাউন্ড-রঙ: # 001 পটভূমি-চিত্র: রৈখিক-গ্রেডিয়েন্ট (সাদা 15%, স্বচ্ছ 16%), রৈখিক-গ্রেডিয়েন্ট (সাদা 15%, স্বচ্ছ 16%) পটভূমি-আকার: 60px 60px ব্যাকগ্রাউন্ড-অবস্থান: 0 0, 30px 30px}- রেডিয়াল-গ্রেডিয়েন্ট (): পটভূমি চিত্রটি একটি রেডিয়াল গ্রেডিয়েন্টে সেট করা আছে। এই সম্পত্তিটির জন্য কমপক্ষে কমপক্ষে দুটি রঙ নির্দিষ্ট করা প্রয়োজন অর্থাত্ কেন্দ্রের প্রান্তের জন্য।
বডি {ব্যাকগ্রাউন্ড-রঙ: # 001 ব্যাকগ্রাউন্ড-চিত্র: রেডিয়াল-গ্রেডিয়েন্ট (সাদা 15%, স্বচ্ছ 16%), রেডিয়াল-গ্রেডিয়েন্ট (সাদা 15%, স্বচ্ছ 16%) পটভূমি-আকার: 60px 60px ব্যাকগ্রাউন্ড-অবস্থান: 0 0, 30px 30px}- পুনরাবৃত্তি-রৈখিক-গ্রেডিয়েন্ট (): এটি একটি রৈখিক গ্রেডিয়েন্ট পুনরাবৃত্তি করে। পুনরাবৃত্তি-রৈখিক-গ্রেডিয়েন্টের জন্য লিনিয়ার গ্রেডিয়েন্টে আমরা যে উদাহরণটি দেখেছি উপরে একই উদাহরণটি ব্যবহার করুন এবং পার্থক্যটি দেখুন।
বডি {ব্যাকগ্রাউন্ড-রঙ: # 001 পটভূমি-চিত্র: পুনরাবৃত্তি-রৈখিক-গ্রেডিয়েন্ট (সাদা 15%, স্বচ্ছ 16%), পুনরাবৃত্তি-রৈখিক-গ্রেডিয়েন্ট (সাদা 15%, স্বচ্ছ 16%) পটভূমি-আকার: 60px 60px ব্যাকগ্রাউন্ড-অবস্থান : 0 0, 30px 30px}- পুনরাবৃত্তি-রেডিয়াল-গ্রেডিয়েন্ট (): এটি একটি রেডিয়াল গ্রেডিয়েন্টটি পুনরাবৃত্তি করে L আমরা আমাদের উপরে রেডিয়াল গ্রেডিয়েন্টে ব্যবহৃত একই উদাহরণটি ঘুরে দেখি।
বডি {ব্যাকগ্রাউন্ড-রঙ: # 001 ব্যাকগ্রাউন্ড-চিত্র: পুনরাবৃত্তি-রেডিয়াল-গ্রেডিয়েন্ট (সাদা 15%, স্বচ্ছ 16%), পুনরাবৃত্তি-রেডিয়াল-গ্রেডিয়েন্ট (সাদা 15%, স্বচ্ছ 16%) ব্যাকগ্রাউন্ড-আকার: 60px 60px ব্যাকগ্রাউন্ড-পজিশন : 0 0, 30px 30px}ফ্যালব্যাক পটভূমি
ফ্যালব্যাক বিকল্প হিসাবে একটি পটভূমি রঙ যুক্ত করার জন্য এটি সর্বদা পেশাদার পরামর্শ হিসাবে পরামর্শ দেওয়া হয়। এটি উদ্ধার করতে আসে বিশেষত যখন ব্যাকগ্রাউন্ডের চিত্রগুলি লোড হয় না বা বিকাশকালে আমরা সেট করা গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড এটি দেখা হয় এমন কিছু পুরানো ব্রাউজার দ্বারা সমর্থিত হয় না।
এটি ব্যবহারকারীর অভিজ্ঞতা লুণ্ঠন করে না এবং এইভাবে ঘোষণা করা যেতে পারে:
বডি {পটভূমি: ইউআরএল (আপেল_লোস্ট.জেপিজি) গোলাপী}একাধিক পটভূমি
আমাদের কাছে একাধিক ব্যাকগ্রাউন্ড চিত্র সেট করার বিকল্প রয়েছে এবং এটি বেশিরভাগ ক্ষেত্রে অগ্রভাগ এবং ব্যাকগ্রাউন্ড চিত্রের মতো প্রয়োজন। চিত্রটির ক্রমটি এখানে গুরুত্বপূর্ণ, প্রথমে যে চিত্রটি হওয়া উচিত তা প্রথমে ঘোষিত হয় এবং শেষের দিকে থাকা চিত্রটি পরবর্তী ঘোষণা করা হয়।
নীচে একাধিক ব্যাকগ্রাউন্ড চিত্রের উদাহরণ দেওয়া হল:
বডি {ব্যাকগ্রাউন্ড-চিত্র: ইউআরএল ('ছোট-হার্ট.জপিজি'), ইউআরএল ('পটভূমি.জপিজি')}পটভূমি পুনরাবৃত্তি
ব্যাকগ্রাউন্ড-পুনরাবৃত্তি বৈশিষ্ট্যটি কোনও চিত্রের পুনরাবৃত্তি আচরণ সংজ্ঞায়িত করতে ব্যাকগ্রাউন্ড-চিত্র সহ ব্যবহৃত হয়। এটি এবং কীভাবে কোনও পটভূমি চিত্র পুনরাবৃত্তি হবে তা নির্দিষ্ট করে। ডিফল্টরূপে পটভূমি-চিত্রটি উলম্ব এবং অনুভূমিকভাবে উভয়ই পুনরাবৃত্তি হয়।
সম্ভাব্য মানগুলি হ'ল:
- পুনরাবৃত্তি- চিত্রটি অনুভূমিকভাবে এবং উলম্বভাবে উভয়ই পুনরাবৃত্তি করে
- নো-রিপিট - চিত্রটি পুনরাবৃত্তি করে না
- পুনরায়-এক্স - চিত্রটি অনুভূমিকভাবে পুনরাবৃত্তি হয়েছে
- রিপিট-ওয়াই - চিত্রটি উল্লম্বভাবে পুনরাবৃত্তি হয়
- স্পেস- চিত্রটি এমনকি ফাঁকা স্থান বা ফাঁক দিয়ে পুনরাবৃত্তি করা হয়।
- বৃত্তাকার - তাদের মধ্যে কোনও ফাঁক ছাড়াই চিত্রটি পুনরাবৃত্তি করা হয়।
পটভূমি পুনরাবৃত্তি বৈশিষ্ট্যের জন্য সিএসএস সিনট্যাক্সটি হ'ল:
পটভূমি পুনরাবৃত্তি: পুনরাবৃত্তি | পুনরাবৃত্তি-এক্স | পুনরাবৃত্তি - y | নো-পুনরাবৃত্তি | স্থান | বৃত্তাকার
বডি {ব্যাকগ্রাউন্ড-ইমেজ: ইউআরএল ('হার্ট.পিএনজি'), ইউআরএল ('ব্যাকগ্রাউন্ড.পিএনজি') ব্যাকগ্রাউন্ড-রিপিট: রিপিট-ওয়াই, রিপিট-এক্স ব্যাকগ্রাউন্ড-কালার: #ffffff}পৃষ্ঠভূমি সংযুক্তি
দ্য পৃষ্ঠভূমি সংযুক্তি বিষয়বস্তু স্ক্রোল করার সাথে সাথে চিত্রটি স্ক্রোল করা উচিত কিনা তা জানাতে সম্পত্তি ব্যাকগ্রাউন্ড-চিত্র সহ ব্যবহৃত হয়। এটি নির্দেশ করে যে পটভূমি চিত্রটি স্থির করা উচিত বা ব্রাউজার উইন্ডো ভিউয়ের সাথে সম্পর্কিত নথির সাথে স্ক্রোল করা উচিত। ডিফল্ট মান হ'ল স্ক্রোল।
সম্ভাব্য মানগুলি হ'ল:
- স্ক্রোল - পৃষ্ঠাটি সহ চিত্রটি স্ক্রোল করে।
- স্থির - চিত্রটি পৃষ্ঠার সাথে স্ক্রোল করবে না
ব্যাকগ্রাউন্ড-সংযুক্তির জন্য সিএসএস সিনট্যাক্সটি হ'ল:
পৃষ্ঠভূমি সংযুক্তি: স্ক্রোল | স্থির
বডি {ব্যাকগ্রাউন্ড-ইমেজ: ইউআরএল ('হার্ট.পিএনজি'), ইউআরএল ('পটভূমি.পিএনজি') ব্যাকগ্রাউন্ড-পুনরাবৃত্তি: স্থান, বৃত্তাকার}পটভূমি অবস্থান
দ্য পটভূমি অবস্থান সম্পত্তি ব্যাকগ্রাউন্ড চিত্রের অবস্থান বা অবস্থান বোঝাতে ব্যবহৃত হয়। সম্ভাব্য মানগুলি হ'ল:
- শীর্ষ
- ঠিক
- নীচে
- বাম
- কেন্দ্র
- এই মানগুলির সংমিশ্রণ (উদাঃ, বাম শীর্ষ)
ব্যাকগ্রাউন্ড-পজিশনের জন্য সিএসএস সিনট্যাক্সটি হ'ল:
পটভূমি অবস্থান: শীর্ষ | ডান | বাম | নীচে | কেন্দ্র
বডি {ব্যাকগ্রাউন্ড-ইমেজ: ইউআরএল ('হার্ট.পিএনজি') ব্যাকগ্রাউন্ড-পুনরাবৃত্তি: কোনও পুনরাবৃত্তি পটভূমি-সংযুক্তি: স্ক্রোল}সিএসএস আকারে পটভূমি চিত্র
এই সম্পত্তিটি সবচেয়ে কার্যকর হিসাবে এটি আমাদের পটভূমির চিত্রের আকার নিয়ন্ত্রণ করতে দেয়। এই সম্পত্তিটির সাথে আমরা নিয়োগ করতে পারি এবং সেই অনুসারে ফলাফল পেতে পারি এমন বিভিন্ন সমন্বয় রয়েছে। ডিফল্ট মানটি অটো।
নিম্নলিখিত মানগুলি ব্যাকগ্রাউন্ড-আকারের সাথে ব্যবহার করা যেতে পারে:
- অটো
- চিত্রের দৈর্ঘ্য এবং প্রস্থ যেমন উদাঃ 20px 40px।
- শতাংশের হিসাবে চিত্রের উচ্চতা এবং প্রস্থ একটি শতাংশ হিসাবে w.r.t অভিভাবক উপাদান উদাঃ 50% 50%।
- কেন্দ্র- চিত্রটি কেন্দ্রে সরান
- কভার, ব্যাকগ্রাউন্ড অঞ্চল দ্বারা চিত্রটি সম্পূর্ণ কভার করতে স্কেলিং করুন।
- ধারণ করে, চিত্রটির আসল উচ্চতা এবং প্রস্থ পর্যন্ত ফিট করার জন্য স্কেলিং করুন।
ব্যাকগ্রাউন্ড-পজিশনের জন্য সিএসএস সিনট্যাক্সটি হ'ল:
পটভূমি আকার: মান
বডি {ব্যাকগ্রাউন্ড-ইমেজ: ইউআরএল ('হার্ট.পিএনজি'), ইউআরএল ('ব্যাকগ্রাউন্ড.পিএনজি') ব্যাকগ্রাউন্ড-পুনরাবৃত্তি: নো-রিপিট, রিপট ব্যাকগ্রাউন্ড-সাইজ: 400px 150px, কভার}বডি {ব্যাকগ্রাউন্ড-ইমেজ: ইউআরএল ('হার্ট.পিএনজি'), ইউআরএল ('ব্যাকগ্রাউন্ড.পিএনজি') ব্যাকগ্রাউন্ড-রিপিট: নো-রিপিট, রিপট ব্যাকগ্রাউন্ড-সাইজ: ধারণ, 400px 150px}পেছনের রং
এটি সিএসএসের সমস্ত বৈশিষ্ট্যের মধ্যে সহজতম প্রযোজ্য। এটি পৃষ্ঠার পটভূমিতে শক্ত রঙ প্রয়োগ করে। এই সম্পত্তির মানটি রঙগুলিতে (উদাঃ লাল, নীল, ইত্যাদি), হেক্স মান এবং আরজিবি মানতে নির্দিষ্ট করা যেতে পারে।
ব্যাকগ্রাউন্ড-রঙের জন্য সিএসএস সিনট্যাক্সটি হ'ল:
পেছনের রং: মান
বডি {ব্যাকগ্রাউন্ড-চিত্র: ইউআরএল (ছোট-হার্ট.জপিজি) ব্যাকগ্রাউন্ড-রঙ: # 22a8e3}জাভা অগভীর অনুলিপি বনাম গভীর অনুলিপি
এটি ব্যাকগ্রাউন্ড সহ যে সমস্ত বৈশিষ্ট্য আমরা ব্যবহার করতে পারি তা শেষ করে। আমরা আমাদের প্রদর্শনীতে যেমন দেখেছি তেমনি আমরা বৈশিষ্ট্যের বিভিন্ন সংমিশ্রণ সর্বদা চেষ্টা করতে পারি।
সিএসএস প্রয়োজনীয় এবং প্রতিটি ফ্রন্ট-এন্ড ওয়েব বিকাশকারীদের জন্য দক্ষতা অর্জন করতে হবে। এটি পটভূমি ডিজাইন এবং স্টাইল করার সময় এবং চিত্তাকর্ষক ওয়েবসাইটগুলি তৈরি এবং ব্যবহারকারীদের অভিজ্ঞতা সমৃদ্ধ করতে সহায়তা করে। সবচেয়ে ভাল হ'ল পরীক্ষা চালিয়ে যাওয়া এবং এই বিশেষ ফ্রন্ট-এন্ড প্রযুক্তির পুরো সদ্ব্যবহার করা কারণ এটি বিস্ময়কর কাজ করতে পারে এবং পৃষ্ঠাটিকে গতিময় রূপ দিতে পারে।
আমাদের দেখুন যা প্রশিক্ষকের নেতৃত্বাধীন লাইভ প্রশিক্ষণ এবং বাস্তব জীবনের প্রকল্পের অভিজ্ঞতার সাথে আসে। এই প্রশিক্ষণটি আপনাকে ব্যাক-এন্ড এবং ফ্রন্ট-এন্ড ওয়েব প্রযুক্তিগুলির সাথে কাজ করার দক্ষতায় দক্ষ করে তোলে। এটিতে ওয়েব ডেভলপমেন্ট, জিক্যুয়ারি, অ্যাঙ্গুলার, নোডজেএস, এক্সপ্রেসজেএস এবং মঙ্গোডিবি প্রশিক্ষণ অন্তর্ভুক্ত রয়েছে।
আমাদের জন্য একটি প্রশ্ন আছে? দয়া করে 'সিএসএসে পটভূমি চিত্র' ব্লগের মন্তব্য বিভাগে এটি উল্লেখ করুন এবং আমরা আপনার কাছে ফিরে আসব।