সিএসএসে অস্পষ্টতা সম্পর্কে আপনার যা কিছু জানা দরকার

এই নিবন্ধটি আপনাকে এমন ধারণার সাথে পরিচয় করিয়ে দেবে যা আপনাকে অস্বচ্ছতা বুঝতে সহায়তা করবে এবং আপনাকে কীভাবে এই পরামিতিটি নিয়ন্ত্রণ করতে হবে তা বলি। নিম্নলিখিত পয়েন্টারগুলি এই নিবন্ধে কভার করা হবে,

• সিএসএসে অস্বচ্ছতা
• অস্বচ্ছতা ক্যাসকেডিং উপাদানগুলির সাথে উত্তরাধিকারসূত্রে প্রাপ্ত
• আরবিজিএ বৈশিষ্ট্যগুলি ক্যাসকেডিংয়ের জন্য সেট করে
• হোভার এফেক্টের উপর অস্বচ্ছতা পরিবর্তন

কোনও উপাদানের পটভূমি অস্বচ্ছতা এইচটিএমএল ডিজাইনে দরকারী বৈশিষ্ট্য সেটিং। অস্বচ্ছতার মাত্রা নির্ধারণ করে (স্বচ্ছতার বিপরীতমুখী), একটি ডিজাইনার সিএসএস অস্বচ্ছতার সম্পত্তিটির মাধ্যমে উপাদানটির দৃশ্যমানতা নিয়ন্ত্রণ করতে পারেন। যখন উপাদানগুলির ক্যাসকেডিং থাকে, একে অপরের উপরে রাখা হয় তখন এটি সাধারণত পটভূমি সেটিংস হিসাবে ব্যবহৃত হয়।

এই বৈশিষ্ট্যটি সবচেয়ে সাধারণ দৃশ্যে ব্যবহৃত হয় তা হ'ল:

• একটি আংশিক স্বচ্ছ পটভূমি চিত্র একটি পাঠ্য উপাদানের পিছনে রাখা হয়।
• পটভূমি চিত্রটি মারাত্মকভাবে দৃশ্যমান, সুতরাং এটি সামনের পাঠ্যকে প্রাধান্য দেয় না।
• ব্যবহারকারী সম্পূর্ণরূপে এটি দেখার জন্য চয়ন করলে চিত্রটি পুরো ফোকাসে আসতে পারে।

আপনি পড়তে চাইতে পারেন সিএসএস অস্বচ্ছতা সম্পর্কে শেখার আগে।

একটি বিস্তৃত সিএসএস টিউটোরিয়াল জন্য, দেখুন প্রাথমিকদের জন্য এডুরেকা সিএসএস টিউটোরিয়াল । এইচটিএমএল ওয়েব ডিজাইন বৃদ্ধিতে যেভাবে সিএসএস ব্যবহার করতে হবে তা আপনি একটি দুর্দান্ত হেড-আপ পাবেন।

সিএসএসে অস্পষ্টতা সম্পর্কিত এই নিবন্ধটি নিয়ে চলছে

সিএসএসে অস্বচ্ছতা

সিএসএসে, অপসিটিটি 0.0 - 1.0 এর মধ্যে সংখ্যার মান হিসাবে সেট করা হয়। শূন্যের কাছাকাছি মানগুলি আরও স্বচ্ছতার প্রতিনিধিত্ব করে, চিত্রটি দৃশ্যমানতায় খুব হালকা হবে। আসুন একটি চিত্র 50% স্বচ্ছতার সাথে দেখানো হচ্ছে তার উদাহরণ দিয়ে শুরু করা যাক। নীচে 1 উদাহরণ দেখুন।

উদাহরণ 1: পটভূমি চিত্রটি অর্ধ- স্বচ্ছতা

ঝালর মধ্যে একটি পরামিতি কি

img {অস্বচ্ছতা: ০.০ ফিল্টার: আলফা (অস্বচ্ছতা = 50) / * আইই 8 এবং তার আগের জন্য * /  

উদাহরণ 1: আউটপুট

মূল চিত্র (100% অস্বচ্ছতা)

50% অস্বচ্ছতা সেটিং সহ চিত্র

উপরের উদাহরণে, কেবল একটি উপাদান ছিল - একটি চিত্র। অন্যান্য উপাদানগুলিও যেমন अस्पष्टতা প্যারামিটার যেমন পাঠ্য, ডিভ উপাদানগুলি এবং ঠিক তেমন সেট করা যায়।

সিএসএসে অস্পষ্টতা সম্পর্কিত এই নিবন্ধটি নিয়ে চলছে

অস্বচ্ছতা ক্যাসকেডিং উপাদানগুলির সাথে উত্তরাধিকারসূত্রে প্রাপ্ত

যখন উপাদানগুলি একে অপরের উপর স্ট্যাক করা থাকে, যদি পটভূমির উপাদানটির অস্বচ্ছতা সেটিংস থাকে, তবে এটি সমস্ত শিশু উপাদান দ্বারা উত্তরাধিকার সূত্রে প্রাপ্ত হয়। এই পূর্বনির্ধারিত সেটিং । এর অর্থ যদি কোনও চিত্রের উপরে একটি পাঠ্য বাক্স স্থাপন করা হয় এবং চিত্রটিতে একটি 0.5 টি अस्पष्टতা সেটিংস থাকে, তবে চিত্র এবং পাঠ্য উপাদান উভয়ই আংশিকভাবে দৃশ্যমান হবে।

আসুন আমাদের পরবর্তী উদাহরণে টম এবং জেরি চিত্রের উপরে রাখা একটি শিশু পাঠ্যের উপাদানটির উদাহরণ নেওয়া যাক। উদাহরণ 2-এ আমরা ডিফল্ট অস্বচ্ছতা প্রভাব দেখতে পাচ্ছি।

। কনটেনার {অবস্থান: আপেক্ষিক পাঠ্য-প্রান্তিককরণ: কেন্দ্রের অস্বচ্ছতা: 0.5}। কেন্দ্রিত {অবস্থান: পরম শীর্ষ: 50% বাম: 50% রূপান্তর: অনুবাদ (-50%, -50%) রঙ: নীল ফন্ট-আকার: 40px} } টম জেরি

উদাহরণ 2: পাঠ্যটি পিতামাতার চিত্র থেকে অস্বচ্ছতার উত্তরাধিকার সূত্রে আসে

সিএসএসে অস্পষ্টতা সম্পর্কিত এই নিবন্ধটি নিয়ে চলছে

আরবিজিএ বৈশিষ্ট্যগুলি ক্যাসকেডিংয়ের জন্য সেট করে

অপর একটি উপায় রয়েছে যেখানে ক্যাসকেডিং উপাদানগুলির সাথে অস্বচ্ছতা নিয়ন্ত্রণ করা যায়। আপনি যদি চান যে শিশু উপাদানটি এর পটভূমির উপাদানটির অস্বচ্ছতা থেকে অবিচ্ছিন্ন থাকে, তবে আপনি এটি ব্যবহার করতে পারেন আরজিবিএ বৈশিষ্ট্য সেটিং setting ।

উদাহরণ 3: আরজিবিএ সেটিংস ব্যবহার করে

ব্যাকগ্রাউন্ড: আরজিবা (, 76, ১5৫, ৮০, ১.০) / * চিত্রের কোনও ধরণের অস্বচ্ছতা নেই * / / * ১০০% অস্বচ্ছতাযুক্ত লেখার জন্য সবুজ পটভূমি * / / * নীল রঙের পাঠ্যে ১০০% অস্বচ্ছতা রয়েছে * /

ব্যাকগ্রাউন্ড: আরজিবা (, 76, ১5৫, ৮০, ০.৪) / * চিত্রের কোনও অস্বচ্ছতা সেটিং নেই * / / * 40% অস্বচ্ছতা * / / * সহ নীল পাঠ্যটি এখনও 100% অস্বচ্ছতার সাথে দেখা *

আরজিবি রঙের কোডের পরে, ‘এ’ বৈশিষ্ট্যটি বোঝায় আলফা । দ্য আলফা প্যারামিটারটি 0.0 (সম্পূর্ণ স্বচ্ছ) এবং 1.0 (সম্পূর্ণ অস্বচ্ছ) এর মধ্যে একটি সংখ্যা।

সিএসএসে অস্পষ্টতা সম্পর্কিত এই নিবন্ধটি নিয়ে চলছে

হোভার এফেক্টের উপর অস্বচ্ছতা পরিবর্তন

কিছু পরিস্থিতিতে, ওয়েব ডিজাইনাররা ব্যবহারকারীটির উপাদানটির উপর দৃষ্টি নিবদ্ধ রাখছে কি না তার উপর নির্ভর করে অস্বচ্ছতা পরিবর্তিত হতে চায়। উদাহরণস্বরূপ, ধরা যাক একটি চিত্র ডিফল্টরূপে 50% অস্বচ্ছতাতে সেট করা আছে। যাইহোক, যখন ব্যবহারকারী চিত্রটির উপর দিয়ে মাউসটি ঘোরাবেন, তখন আমরা চাইব যে চিত্রটি 100% অস্বচ্ছতার সাথে পুরো ফোকাসে আসে।

উদাহরণ 4 দেখায় যে এটি কীভাবে হয়।

সাধারণ বিষয়গুলি লক্ষ করুন:

কিভাবে একটি tostring পদ্ধতি লিখতে

• অস্পষ্টতা সেটিংস সিএসএসে ‘দৃশ্যমানতা’ বৈশিষ্ট্যটি ব্যবহার করার বিকল্প। তবে, অস্বচ্ছতা সেটিংস ব্যবহার শূন্য থেকে পূর্ণ পর্যন্ত বিভিন্ন স্বচ্ছতার ডিগ্রি সেট করা সহজ করে।
• অস্বচ্ছতার স্তরটি বিভিন্ন ব্রাউজারগুলিতে যত্ন সহকারে পরীক্ষার পরে সেট করতে হয়। অস্বচ্ছতা যখন কম মানগুলিতে সেট করা থাকে, কখনও কখনও পাঠ্য বা চিত্র সম্পূর্ণ অদৃশ্য বা অপঠনযোগ্য হয়ে উঠতে পারে।
• অস্বচ্ছতা ব্যবহার করার পিছনে ধারণাটি হ'ল কিছু উপাদানগুলিতে তীব্র ফোকাস দেওয়া যখন অন্য পটভূমি উপাদানগুলি ব্যবহারকারীর দৃষ্টি আকর্ষণ করে না। সুতরাং এই ধরনের পটভূমি উপাদানগুলি স্বল্প অস্বচ্ছতার সাথে সেট করা আছে।
• ইন্টারনেট এক্সপ্লোরারে, আইই 8 এবং পুরানো সংস্করণগুলির জন্য, অস্বচ্ছতা সম্পত্তি 1 থেকে 100 এর মধ্যে একটি ‘ফিল্টার’ সেটিংস other অন্য সমস্ত ব্রাউজারে এটি 0 থেকে 1 অবধি থাকে।

এটি আমাদের CSS এ অস্পষ্টতা সম্পর্কিত এই নিবন্ধের শেষে নিয়ে আসে।

আপনি যদি ওয়েব-বিকাশ সম্পর্কে আরও শিখতে আগ্রহী হন তবে এটি দেখুন লিখেছেন এডুরেকা। ওয়েব ডেভলপমেন্ট শংসাপত্র প্রশিক্ষণ আপনাকে এইচটিএমএল 5, সিএসএস 3, টুইটার বুটস্ট্র্যাপ 3, জ্যাকুয়ারি এবং গুগল এপিআই ব্যবহার করে কীভাবে চিত্তাকর্ষক ওয়েবসাইট তৈরি করতে শিখতে এবং এ্যামাজন সিম্পল স্টোরেজ সার্ভিসে (এস 3) স্থাপন করতে সহায়তা করবে।

আপনি যদি এখনও আগ্রহী হন তবে আপনার যদি কোনও প্রশ্ন থাকে তবে আপনি এটি এই “সিএসএস ইন ওপাসিটি” ব্লগের মন্তব্য বিভাগে পোস্ট করতে পারেন এবং আমরা যত তাড়াতাড়ি সম্ভব আপনার কাছে ফিরে আসব।