این آموزش در تاریخ ۱۴۰۰/۱۱/۰۹ آپدیت شده است.
آموزش ویژگی opacity در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی opacity در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی opacity در CSS
با استفاده از ویژگی opacity در CSS میتوان میزان شفافیت / تاری یک تگ را مشخص و یا تعریف کرد.
این ویژگی یک مقدار از ۰ تا ۱ یا از ۰٫۱ تا ۱٫۰ یا بصورت درصدی از ۰ درصد تا ۱۰۰ درصد میپذیرد.
وقتی تگ والد ( پدر ) با استفاده از این ویژگی میزان شفافیتش رو کم کنیم، تمام فرزندان داخل اون تگ نیز بصورت خودکار میزان شفافیت شان کم خواهد شد.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی opacity را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : تنظیم میزان شفافیت عکس
|
1 2 3 4 |
img.f1 { opacity: 0.3; } img.f2 { opacity: 0.6; } img.f3 { opacity: 0.8; } img.f4 { opacity: 1; } |
مثال شماره ۲ : تنظیم میزان شفافیت با استفاده از کدرنگ RGBA ( آموزش کد رنگ RGBA را مشاهده نمایید )
|
1 2 3 4 5 6 7 8 9 10 11 |
.Box1{ background-color: rgba(221,123,32,0.1); } .Box2{ background-color: rgba(221,123,32,0.3); } .Box3{ background-color: rgba(221,123,32,0.5); } |
مثال شماره ۳ : کم کردن شفافیت زمینه تگ پدر به گونه ای که تگ های فرزند تحت تاثیر این تغییر قرار نگیرند
|
1 2 3 4 5 6 7 |
.Pedar{ background-color: rgba(0,0,0,0.8); } .Farzand{ background-color: rgba(0, 124, 198,1); } |
Free-Learn
جدول مشخصات ویژگی opacity در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | ۱ |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | دارد | اطلاعات بیشتر |
| نسخه | CSS3 |
| نحوه استفاده در جاوااسکریپت | object.style.opacity=”0.5″; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی opacity در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| opacity | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
opacity: number|%|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی opacity در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| number | یک مقدار عددی از ۰ یا ۰٫۱ تا ۱ یا ۱٫۰ ( مقدار پیش فرض ۱ ) |
| % | یک مقدار درصدی از ۰% تا ۱۰۰% ( مقدار پیش فرض ۱۰۰% ) |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- مقدار درصدی ( % ) در برخی از مرورگرها پشتیبانی نمیشه، لطفا و حتما از مقدار عددی استفاده کنید.
- بصورت پیش فرض وقتی از ویژگی Opacity در عنصر پدر ( ظرف یا کانتینر ) استفاده نمایید ، بصورت خودکار تمامی فرزندان موجود در اون ظرف هم Opacity میگیرند، حال برای اینکه کاری کنیم که فرزندان Opacity نگیرند میتونیم از کدرنگ RGBA همانند مثال شماره ۴ استفاده نماییم.
