آموزش ویژگی opacity در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی opacity در CSS با من همراه باشید.

آموزش ویژگی opacity در CSS

Free-Learn

ویژگی opacity در CSS

با استفاده از ویژگی opacity در CSS میتوان میزان شفافیت یک عنصر را مشخص و یا تعریف کرد، منظور از میزان شفافیت یعنی مثلا میتونیم یک تصویر یا یک متن رو کم رنگ / کدر کنیم.

این ویژگی یک مقدار از ۰ تا ۱ یا از ۰٫۱ تا ۱٫۰ یا بصورت درصدی از ۰درصد تا ۱۰۰ درصد میپذیرد.

وقتی یک عنصر را با استفاده از این ویژگی میزان شفافیتش رو کم کنید، تمام فرزندان اون عنصر نیز بصورت خودکار میزان شفافیت شان کم خواهد شد.

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از ویژگی opacity را در زبان CSS مشاهده نمایید.

مثال شماره ۱ : کم کردن شفافیت تصویر با استفاده از ویژگی Opacity

امتحان کنید

مثال شماره ۲ : تنظیم میزان شفافیت با استفاده از کدرنگ RGBA ( آموزش کد رنگ RGBA را مشاهده نمایید )

امتحان کنید

مثال شماره ۳ : برای استفاده در مرورگر اینترنت اکسپلورر یا IE ( چون در نسخه های قدیمی تر اینترنت اکسپلورر ( از نسخه ۸ قبلتر ) از ویژگی Opacity بصورت عادی پشتیبانی نمیکند )

امتحان کنید

مثال شماره ۴ : کم کردن شفافیت زمینه عنصر پدر به گونه ای که عناصر فرزند تحت تاثیر این تغییر قرار نگیرند

امتحان کنید

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 بصورت زیر می باشد.

Free-Learn

جدول مقادیر ویژگی opacity در CSS

در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.

مقدار توضیح
number یک مقدار عددی از ۰ یا ۰٫۱ تا ۱ یا ۱٫۰ ( مقدار پیش فرض ۱ )
% یک مقدار درصدی از ۰% تا ۱۰۰% ( مقدار پیش فرض ۱۰۰% )
initial استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر
inherit استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر

Free-Learn

نکات و توضیحات

این ویژگی در مرورگر اینترنت اکسپلورر از نسخه ۸ به پایین پشتیبانی نمیشود و باید از ویژگی filter استفاده نمایید، همانند دستورات زیر :

 

بصورت پیش فرض وقتی از ویژگی Opacity در عنصر پدر ( ظرف یا کانتینر ) استفاده نمایید ، بصورت خودکار تمامی فرزندان موجود در اون ظرف هم Opacity میگیرند، حال برای اینکه کاری کنیم که فرزندان Opacity نگیرند میتونیم از کدرنگ RGBA همانند مثال شماره ۴ استفاده نماییم.

Free-Learn

دریافت PDF یا پرینت این مطلب