X

X

X

CSS Opacity / Transparency (স্বচ্ছতা)


কোনো ইলামেন্টের opacity/transparency নির্ধারণ করার জন্য opacity property ব্যবহৃত হয়।


Transparent Image

opacity property এর মান 0.0 – 1.0 পর্যন্ত যেকোনো সংখ্যা হতে পারে। মান যত কম হবে এটি ততই ট্র্যান্সপ্যারেন্ট হবে:

Forestopacity 0.2
Forestopacity 0.5
Forestopacity 1
(default)

বি:দ্র: IE8 এবং তার আগের ভার্শনগুলোতে অপাসিটি সেট করার জন্য filter:alpha(opacity=x) ব্যবহার করা হতো। এর মান ০ থেকে ১০০ পর্যন্ত যেকোনো মান হতে পারে।

Code Example

img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Transparent Hover Effect

অনেক সময় opacity প্রপার্টি ও :hover selector কে একসাথে ব্যবহার করা হয়, যাতে মাউস আলোচ্য ইলামেন্টের উপরে নিয়ে গেলে তার ট্যান্সপ্যারেন্সি পরিবর্তিত হয়।

Northern Lights
Mountains
Fjords

Code Example

img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

উদাহরণের ব্যাখ্যা

প্রথম CSS block টি প্রথম উদাহরণের অনুরূপ। একইসাথে দেখানো হয়েছে, যখন মাউস উক্ত ইলামেন্টের উপরে নিয়ে যাওয়া হবে তখন, তার ট্র্যান্সপ্যারেন্সি কতটুকু পরিবর্তিত হবে। যখন ট্যান্সপ্যারেন্সীর দরকার হবে না , তখন opacity:1; ব্যবহার করতে হবে।

নিচের উদাহরণে বিপরীত হোভার ইফেক্টের বর্ণনা দেওয়া হলো:

Northern Lights
Mountains
Fjords

Code Example

img:hover {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Transparent Box

যখন opacity property কে কোনো ইলামেন্টের ব্যাকগ্রাউন্ডের ট্রান্সপ্যারেন্সি যুক্ত করার জন্য ব্যবহৃত হয়, তখন তার সব চাইল্ড ইলামেন্টেও একই প্রপার্টি উত্তরাধিকার সূত্রে প্রযুক্ত হয়। ফলে একই মান বিশিষ্ট Transparency যুক্ত হওয়ার কারণে উক্ত ইলামেন্ট ভালোভাবে দৃশ্যমান নাও হতে পারে।

opacity 1
opacity 0.6
opacity 0.3
opacity 0.1

Code Example

div {
    background-color: #4CAF50;
    padding: 10px;
}

div.first {
    opacity: 0.1;
    filter: alpha(opacity=10); /* For IE8 and earlier */
}

div.second {
    opacity: 0.3;
    filter: alpha(opacity=30); /* For IE8 and earlier */
}

div.third {
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


RGBA এর মাধ্যমে Transparency

যদি শুধুমাত্র কাংখিত ইলামেন্টের জন্যই opacity প্রয়োগ করতে চান, তবে strong>RGBA color মান ব্যবহার করতে পারেন।

100% opacity
60% opacity
30% opacity
10% opacity

আমাদের CSS Colors Chapter এ RGB color সম্পর্কে বিস্তারিত জানতে পারবেন। RGBA color এর মান সেট করার পদ্ধতি হলো: rgba(red, green, blue, alpha)। alpha parameter এর মান 0.0 (পুরোপুরি transparent) হতে 1.0 (পুরোপুরি opaque) পর্যন্ত যেকোনো সংখ্যা হতে পারে।

টিপস: RGBA Colors সম্পর্কে আমাদের CSS3 Colors Chapter আরও বিস্তারিত জানতে পারবেন।

Code Example

div {
    background: rgb(76, 175, 80);
    padding: 10px;
}

div.first {
    background: rgba(76, 175, 80, 0.1);
}

div.second {
    background: rgba(76, 175, 80, 0.3);
}

div.third {
    background: rgba(76, 175, 80, 0.6);
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Transparent Box এ টেক্সট উপস্থাপণ

This is some text that is placed in the transparent box.

Code Example

<!DOCTYPE html>
<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;
  filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
  </div>
</div>

</body>
</html>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

প্রথমে ব্যাকগ্রাউন্ড ইমেজসহ একটি <div> element (class=”background”) ইলামেন্ট তৈর করি, সাথে বর্ডারও যুক্ত করি। তারপর প্রথম ইলামেন্টের ভেতরে আরেকটি <div> (class=”transbox”) ইলামেন্ট তৈরি করি।


নিজে নিজে চর্চা করুন!

Exercise 1 »  Exercise 2 »