آموزش ویژگی opacity در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی opacity در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی opacity در CSS
با استفاده از ویژگی opacity در CSS میتوان میزان شفافیت یک عنصر را مشخص و یا تعریف کرد، منظور از میزان شفافیت یعنی مثلا میتونیم یک تصویر یا یک متن رو کم رنگ / کدر کنیم.
این ویژگی یک مقدار از ۰ تا ۱ یا از ۰٫۱ تا ۱٫۰ یا بصورت درصدی از ۰درصد تا ۱۰۰ درصد میپذیرد.
وقتی یک عنصر را با استفاده از این ویژگی میزان شفافیتش رو کم کنید، تمام فرزندان اون عنصر نیز بصورت خودکار میزان شفافیت شان کم خواهد شد.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی opacity را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : کم کردن شفافیت تصویر با استفاده از ویژگی Opacity
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
img.f1{ opacity:0.2; } img.f2{ opacity:0.4; } img.f3{ opacity:0.6; } img.f4{ opacity:0.8; } img.f5{ opacity:1; } |
مثال شماره ۲ : تنظیم میزان شفافیت با استفاده از کدرنگ RGBA ( آموزش کد رنگ RGBA را مشاهده نمایید )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
div.f1{ background-color:rgba(221,123,32,0.1); } div.f2{ background-color:rgba(221,123,32,0.3); } div.f3{ background-color:rgba(221,123,32,0.5); } div.f4{ background-color:rgba(221,123,32,0.7); } div.f5{ background-color:rgba(221,123,32,0.9); } div.f6{ background-color:rgba(221,123,32,1); } |
مثال شماره ۳ : برای استفاده در مرورگر اینترنت اکسپلورر یا IE ( چون در نسخه های قدیمی تر اینترنت اکسپلورر ( از نسخه ۸ قبلتر ) از ویژگی Opacity بصورت عادی پشتیبانی نمیکند )
|
1 2 3 4 5 6 7 8 9 |
img.f1{ filter: alpha(opacity=40); opacity: 0.4; } img.f2{ filter: alpha(opacity=80); opacity: 0.8; } |
مثال شماره ۴ : کم کردن شفافیت زمینه عنصر پدر به گونه ای که عناصر فرزند تحت تاثیر این تغییر قرار نگیرند
|
1 2 3 4 5 6 7 |
div.pedar{ background-color:rgba(211,105,31,0.3); } div.farzand{ background-color:rgba(83,178,50,1); } |
Free-Learn
جدول مشخصات ویژگی opacity در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | ۱ |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | دارد | اطلاعات بیشتر |
| نسخه | CSS3 |
| نحوه استفاده در جاوااسکریپت | object.style.opacity=”0.5″; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی opacity در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
| opacity | ۴٫۰ | ۲٫۰ | ۱۰٫۰ | ۳٫۱ | ۹٫۰ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
opacity: number|%|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی opacity در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| number | یک مقدار عددی از ۰ یا ۰٫۱ تا ۱ یا ۱٫۰ ( مقدار پیش فرض ۱ ) |
| % | یک مقدار درصدی از ۰% تا ۱۰۰% ( مقدار پیش فرض ۱۰۰% ) |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
این ویژگی در مرورگر اینترنت اکسپلورر از نسخه ۸ به پایین پشتیبانی نمیشود و باید از ویژگی filter استفاده نمایید، همانند دستورات زیر :
|
1 |
filter:Alpha(opacity=50) |
بصورت پیش فرض وقتی از ویژگی Opacity در عنصر پدر ( ظرف یا کانتینر ) استفاده نمایید ، بصورت خودکار تمامی فرزندان موجود در اون ظرف هم Opacity میگیرند، حال برای اینکه کاری کنیم که فرزندان Opacity نگیرند میتونیم از کدرنگ RGBA همانند مثال شماره ۴ استفاده نماییم.
