Google Chrome
Smashing Magazine
Mozilla Developer Network
CSS-Tricks
تنظیم شفافیت اجزای صفحه در CSS
۲۷ خرداد ۱۳۸۸ ساعت ۰۱:۳۱
طراحی وب
CSS Transparency بصورت Cross-Browser
برای محوسازی اجزای صفحه توسط CSS باید از مشخصه opacity استفاده کرد ولی متاسفانه این مشخصه توی برخی مرورگرها(و برخی نسخه ها) درست عمل نمی کنه. این بخاطر این هست که مثلا نسخه های قدیمی تر اینترنت اکسپلورر اصلا همچین مشخصه ای ندارند و از مشخصه alpha استفاده می کنند. رفتار نسخه های قدیمی موزیلا و سفری هم متفاوته.
در زیر مشخصه های همه مرورگرها لیست شده که اگر بخواید عملیات محوسازی رو بصورت بی نقص در همه جا اجرا کنید باید همه این مشخصه ها رو با هم استفاده کنید:
.transparency {
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
filter مخصوص نسخه های قدیمی اینترنت اکسپلورر هست.
moz-opacity- برای موزیلا،
khtml-opacity- برای مرورگرهای WebKit مثل گوگل کروم و سفری اپل،
و opacity برای همه مرورگرهای استاندارد.
دقت کنید که مقدار محوسازی به این صورت در نظر گرفته میشه که 1 یعنی وضوح کامل و صفر یعنی محو کامل و در حالت filter هم به همین صورته ولی از عدد صفر تا صد.
تو چی فکر می کنی؟