CSS অপাক্ততা / স্পষ্টতা
- পূর্ববর্তী পৃষ্ঠা CSS প্রতীক প্রতিভাস্ত্র
- পরবর্তী পৃষ্ঠা CSS নেভিগেশন বার
opacity এই প্রতিশব্দটি সমস্ত এলিমেন্টের অপাক্ততা/স্পষ্টতা নির্দেশ করে。
স্পষ্ট ছবি
opacity এই প্রতিশব্দের মান ০.০ থেকে ১.০ এর মধ্যে। মানটি নিচে আসলে, তখন তা স্পষ্টতা বৃদ্ধি পায়:
opacity 0.2
opacity 0.5
opacity 1
একটি উদাহরণ
img {
opacity: 0.5;
}
স্পষ্ট হওয়া স্থানান্তরণ প্রভাব
opacity এই প্রতিশব্দ সাধারণত :hover সিলেক্টরটির সাথে একসঙ্গে ব্যবহার করলে, মাউস অবস্থান করতেও অপাক্ততা পরিবর্তন করা যায়:
একটি উদাহরণ
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
উদাহরণ ব্যাখ্যা
প্রথম CSS ব্লক একইভাবে উদাহরণ ১-এর কোডের অনুরূপ। এছাড়া, আমরা একটি প্রভাব যোগ করেছি যা যখন ব্যবহারকারী একটি ছবিতে মাউস অবস্থান করবে, এই সময়, আমরা চাই যে ছবিটি অপাক্ত (স্পষ্ট) থাকে। এই CSS-টি হলো: opacity:1;.
যখন মাউস ইনডেক্স চিত্র থেকে পড়ে যায়, চিত্র পুনরায় স্বচ্ছ হয় এবং
বিপরীত হভিং প্রভাবের উদাহরণ:
একটি উদাহরণ
img:hover {
opacity: 0.5;
}
স্বচ্ছ বাক্স
ব্যবহার opacity প্রত্যেক উপঘাটককে অপ্যাক্সি সম্পদকে সম্প্রসারিত করতে যখন একটি প্রক্রিয়াকরণের মধ্যে, এটা সম্পূর্ণ স্বচ্ছ উপঘাটকের ভিতরের লেখা পড়ার জন্য অসুবিধা হতে পারে:
একটি উদাহরণ
div {
opacity: 0.3;
}
RGBA এর অপ্যাক্সি ব্যবহার
যদি আপনি উপঘাটক এবং উপঘাটকগুলিতে অপ্যাক্সি প্রয়োগ করতে নয়, যেমন উপরের উদাহরণ, RGBA রংভান্ডা ব্যবহার করুন।নিচের উদাহরণ প্রকৃত অপ্যাক্সি নয়, প্রকৃত পটভূমির অপ্যাক্সি সেট করে:
আপনি আমাদের CSS রঙ এই চাপের মধ্যে আপনি RGB রং হিসাবে ব্যবহার করতে পারেন।RGB রংভান্ডা ছাড়াও, RGB রংভান্ডা এবং alpha চ্যানেল (RGBA) - যা রংভান্ডা অস্তিত্বকে নির্দেশ করে - সঙ্গে ব্যবহার করা যেতে পারে。
RGBA রংভান্ডা হল: rgba(red, green, blue, alpha) alpha পারামিটার হল 0.0 (সম্পূর্ণ স্বচ্ছ) এবং 1.0 (সম্পূর্ণ অস্তিত্ব) মধ্যের সংখ্যা。
তীক্ষ্ণদৃষ্টিআপনি আমাদের CSS রঙ এই চাপের মধ্যে আপনি RGBA রং সম্পর্কে আরও বেশি জানতে পারবেন。
একটি উদাহরণ
div {
background: rgba(76, 175, 80, 0.3) /* অস্তিত্বকে 30% অপ্যাক্সি */
}
স্বচ্ছ বাক্সের লেখা
এই স্বচ্ছ বাক্সের ভিতরে কিছু লেখা আছে。
একটি উদাহরণ
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>এটা একটি স্পষ্ট ফ্লেক্সের মধ্যে অবস্থিত টেক্সট।</p>
</div>
</div>
</body>
</html>
উদাহরণ ব্যাখ্যা
প্রথমে, আমরা একটি পটভূমি ছবি এবং সীমানা সহ একটি <div> ইলিমেন্ট তৈরি করি (class="background")。
তারপর, আমরা প্রথম একটি <div> এবং আরেকটি <div> তৈরি করি (class="transbox")。
<div class="transbox"> এটা পটভূমির রঙ এবং সীমানা সহ একটি ব্যাকগ্রাউন্ড রঙ এবং সীমানা সহ একটি div হয় - এই div স্পষ্টভাবে হলেও পারস্পরিকভাবে স্পষ্ট হয়েছে。
স্পষ্ট হলে, আমরা একটি <div> এবং <p> ইলিমেন্টের মধ্যে কিছু টেক্সট যোগ করি。
- পূর্ববর্তী পৃষ্ঠা CSS প্রতীক প্রতিভাস্ত্র
- পরবর্তী পৃষ্ঠা CSS নেভিগেশন বার
