در جلسه قبل از آموزش CSS با تکنیک CSS Sprite آشنا شدید. در این بخش قصد داریم شما را با ویژگی opacity در CSS آشنا کنیم.
ویژگی opacity در CSS مقدار شفافیت یک المان را در صفحه وب مشخص می کند.
Opacity در مرورگرها
Opacity حالا جزیی از خصوصیات CSS3 است, اما برای مدت طولانی وجود داشت.
به هر حال, مرورگرهای قدیمی راه های مختلفی برای کنترل کدری (opacity) یا شفافیت (transparency) دارند.
ویژگی opacity در CSS در مرورگرهای مدرن
سینتکس معمولی ویژگی opacity در بیشتر مرورگرهای حال حاضر مثل فایرفاکس, کروم, سافاری, اپرا و IE9 بصورت زیر است.
|
1 2 3 |
p { opacity: 0.7; } |
استایل بالا المان پاراگرف را ۷۰٪ مات می کند (یا همان ۳۰٪ شفاف)
ویژگی opacity در CSS مقداری بین ۰٫۰ تا ۱٫۰ را دریافت می کند. استایل opacity: 1; المان را کاملا مات (شفافیت ۰٪) و استایل opacity: 0; نیز المان را کاملا شفاف می کند (۱۰۰٪)
شفافیت ۱۰۰٪ به این معنی است که دیگر در صفحه نمایش داده نمی شود و حالت نامریی دارد.
ویژگی opacity در CSS در مرورگر IE8 و به پایین
نسخه های قدیمی اینترنت اکسپلورر فقط خاصیت alpha filter را برای کنترل شفافیت پشتیبانی می کنند.
|
1 2 3 4 |
p { filter: alpha(opacity=50); zoom: 1; /* Fix for IE7 */ } |
نکته: فیلترهای آلفا مقادیر بین ۰ تا ۱۰۰ را می پذیرند. که ۰ المان را کامل و ۱۰۰٪ شفاف می کند.
ویژگی opacity در CSS برای همه مرورگرها
با ترکیب دو قدم بالا می توانید از ویژگی opacity در CSS برای همه مرورگرها استفاده کنید.
|
1 2 3 4 5 |
p { opacity: 0.5; /* Opacity for Modern Browsers */ filter: alpha(opacity=50); /* Opacity for IE8 and lower */ zoom: 1; /* Fix for IE7 */ } |
که البته این روزها بسیار کمتر کسی را میشه پیدا کرد که از IE8 استفاده کند بنابراین در طراحی ها نیاز نیست از مثال بالا بهره ببرید.
همچنین دقت کنید که خاصیت alpha برای کنترل شفافیت فقط در اینترنت اکسپلورر معتبر است و در دیگر مرورگهای امروزی یک کد نامعتبر و غیر استاندارد ناشناخته است.
ویژگی opacity در CSS برای تصاویر
شما می توانید تصاویر شفاف را با ویژگی opacity در CSS ایجاد کنید.
سه تصویر زیر همه از یک منبع تصویر هستند و تنها تفاوت آنها مقدار opacity است.
متن در باکس شفاف
زمانی که از opacity روی یک المان و نه فقط پس زمینه استفاده می کنید, کل المان و تگ های فرزند آن نیز شفاف می شوند.
اینجا می بینید که متن های داخل با بالا رفتن مقدار opacity آنها خوانایی کمتری پیدا می کنند.
| OPACITY | OPACITY | OPACITY | OPACITY |
برای جلوگیری از اینکار شما می توانید از تصاویر بدون پس زمینه PNG استفاده کنید یا اینکه متن را خارج از باکس شفاف قرار بدید و بصورت بصری آن را با لحاظ کردن position یا margin به داخل باکس هل بدید
|
1 2 3 4 5 6 7 8 9 10 |
div { float: left; opacity: 0.7; border: 1px solid #949781; } p { float: left; position: relative; margin-left: -400px; } |
تغییر شفافیت با RGBA
علاوه بر RGB, نسخه CSS3 یک راه جدید برای مشخص کردن رنگ ها به همراه کانال آلفا معرفی که کرده است به نام RGBA که مخفف Red Blue Green Alpha است.
استفاده از RGBA برای لحاظ کردن شفافیت رنگ بسیار ساده است.
|
1 2 3 4 5 6 |
div { background: rgba(200, 54, 54, 0.5); } p { color: rgba(200, 54, 54, 0.25); } |
اعداد هر سه بخش ابتدایی مقادیر رنگ RGB هستند و مقدار چهارم مشخص کننده کانال آلفا که مقدار بین ۰ تا ۱ را می گیرد (۰ کاملا شفاف و غیر قابل نمایش و ۱ کاملا مات)
یک مشخصه مهم دربره RGBA این است که می توانیم opacity هر رنگ را کنترل کنیم.
با RGBA , می توانید رنگ متن المان را شفاف و پس زمینه را بدون تغییر قرار بدیم.
| RGBA | RGBA | RGBA | RGBA |
یا می توانیم رنگ متن را بدون تغییر و فقط شفافیت پس زمینه را لحاظ کنیم.
| RGBA | RGBA | RGBA | RGBA |
نکته: شفافیت RGBA برعکس opacity تاثیری بر المان های فرزند نمی گذارد.
همه مرورگرها رنگ های RGBA را پشتیبانی نمی کنند, بنابراین می توانید از رنگ های توپر و جامد یا تصاویر PNG شفاف برای مرورگرهایی که پشتیبانی نمی کنند استفاده کنید.
|
1 2 3 4 5 6 |
p { /* Fallback for web browsers that doesn't support RGBA */ background: rgb(0, 0, 0); /* RGBa with 0.5 opacity */ background: rgba(0, 0, 0, 0.5); } |
باز هم تاکید می کنم که نیازی به این کار نیست و همه مرورگرهای مدرن امروزی از این موارد کاملا پشتیبانی می کنند.
امیدوارم در این بخش آموزش CSS, از ویژگی opacity در CSS نهایت استفاده را برده باشید.
در بخش بعدی با سلکتور attribute در CSS آشنا می شویم.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
