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

  • آپدیت شده در تاریخ

آموزش CSS

در جلسه قبل از آموزش CSS با تکنیک CSS Sprite آشنا شدید. در این بخش قصد داریم شما را با ویژگی opacity در CSS آشنا کنیم.

ویژگی opacity در CSS مقدار شفافیت یک المان را در صفحه وب مشخص می کند.

Opacity در مرورگرها

Opacity حالا جزیی از خصوصیات CSS3 است, اما برای مدت طولانی وجود داشت.

به هر حال, مرورگرهای قدیمی راه های مختلفی برای کنترل کدری (opacity) یا شفافیت (transparency) دارند.

ویژگی opacity در CSS در مرورگرهای مدرن

سینتکس معمولی ویژگی opacity در بیشتر مرورگرهای حال حاضر مثل فایرفاکس, کروم, سافاری, اپرا و IE9 بصورت زیر است.

استایل بالا المان پاراگرف را ۷۰٪ مات می کند (یا همان ۳۰٪ شفاف)

ویژگی opacity در CSS مقداری بین ۰٫۰ تا ۱٫۰ را دریافت می کند. استایل opacity: 1; المان را کاملا مات (شفافیت ۰٪) و استایل opacity: 0; نیز المان را کاملا شفاف می کند (۱۰۰٪)

شفافیت ۱۰۰٪ به این معنی است که دیگر در صفحه نمایش داده نمی شود و حالت نامریی دارد.

ویژگی opacity در CSS در مرورگر IE8 و به پایین

نسخه های قدیمی اینترنت اکسپلورر فقط خاصیت alpha filter را برای کنترل شفافیت پشتیبانی می کنند.

نکته: فیلترهای آلفا مقادیر بین ۰ تا ۱۰۰ را می پذیرند. که ۰ المان را کامل و ۱۰۰٪ شفاف می کند.

ویژگی opacity در CSS برای همه مرورگرها

با ترکیب دو قدم بالا می توانید از ویژگی opacity در CSS برای همه مرورگرها استفاده کنید.

که البته این روزها بسیار کمتر کسی را میشه پیدا کرد که از IE8 استفاده کند بنابراین در طراحی ها نیاز نیست از مثال بالا بهره ببرید.

همچنین دقت کنید که خاصیت alpha برای کنترل شفافیت فقط در اینترنت اکسپلورر معتبر است و در دیگر مرورگهای امروزی یک کد نامعتبر و غیر استاندارد ناشناخته است.

ویژگی opacity در CSS برای تصاویر

شما می توانید تصاویر شفاف را با ویژگی opacity در CSS ایجاد کنید.

سه تصویر زیر همه از یک منبع تصویر هستند و تنها تفاوت آنها مقدار opacity است.

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

متن در باکس شفاف

زمانی که از opacity روی یک المان و نه فقط پس زمینه استفاده می کنید, کل المان و تگ های فرزند آن نیز شفاف می شوند.

اینجا می بینید که متن های داخل با بالا رفتن مقدار opacity آنها خوانایی کمتری پیدا می کنند.

OPACITYOPACITYOPACITYOPACITY

برای جلوگیری از اینکار شما می توانید از تصاویر بدون پس زمینه PNG استفاده کنید یا اینکه متن را خارج از باکس شفاف قرار بدید و بصورت بصری آن را با لحاظ کردن position یا margin به داخل باکس هل بدید

تغییر شفافیت با RGBA

علاوه بر RGB, نسخه CSS3 یک راه جدید برای مشخص کردن رنگ ها به همراه کانال آلفا معرفی که کرده است به نام RGBA که مخفف Red Blue Green Alpha است.

استفاده از RGBA برای لحاظ کردن شفافیت رنگ بسیار ساده است.

اعداد هر سه بخش ابتدایی مقادیر رنگ RGB هستند و مقدار چهارم مشخص کننده کانال آلفا که مقدار بین ۰ تا ۱ را می گیرد (۰ کاملا شفاف و غیر قابل نمایش و ۱ کاملا مات)

یک مشخصه مهم دربره RGBA این است که می توانیم opacity هر رنگ را کنترل کنیم.

با RGBA , می توانید رنگ متن المان را شفاف و پس زمینه را بدون تغییر قرار بدیم.

RGBARGBARGBARGBA

یا می توانیم رنگ متن را بدون تغییر و فقط شفافیت پس زمینه را لحاظ کنیم.

RGBARGBARGBARGBA

نکته: شفافیت RGBA برعکس opacity تاثیری بر المان های فرزند نمی گذارد.

همه مرورگرها رنگ های RGBA را پشتیبانی نمی کنند, بنابراین می توانید از رنگ های توپر و جامد یا تصاویر PNG شفاف برای مرورگرهایی که پشتیبانی نمی کنند استفاده کنید.

باز هم تاکید می کنم که نیازی به این کار نیست و همه مرورگرهای مدرن امروزی از این موارد کاملا پشتیبانی می کنند.

 

امیدوارم در این بخش آموزش CSS, از ویژگی opacity در CSS نهایت استفاده را برده باشید.

در بخش بعدی با سلکتور attribute در CSS آشنا می شویم.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
دیدگاه کاربران

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    دوره های آموزشی

    می خواهید صفر تا صد HTML,CSS را یاد بگیرید ؟

    50% تخفیف ویژه
    فقط 144 هزار تومان

    برای دریافت آموزش طراحی سایت با پروژه قالب فروشگاه روی دکمه زیر بزنید
    می خواهم طراحی سایت را یاد بگیرم
    close-link