شفافیت در CSS
شاید یکی از جذابترین دستورات CSS در طراحی سایت درصد شفاف بودن یک قسمت هست.
شما برای شفاف کردن یک قسمت می تونید از کد زیر استفاده کنید:
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
توضیح کد بالا:
- دستور opacity :
این دستور مهمترین دستور بین کدهای بالا هست. این دستور بین در مرورگرهای جدید و استاندارد نظیر فایرفاکس - اپرا - سافاری بدون مشکل کار می کنه.
- دستور filter : این دستور مختص مرورگر اینترنت اکسپلورر هست که متاسفانه هنوز از استاندارد ها پشتیبانی نمی کنه و استاندارد های خاص خودش رو داره.
- دستور -moz-opacity : این دستور برای مرورگرهای قدیمی موزیلا که از دستور اول پشتیبانی نمی کنند استفاده می شه.
- دستور -khtml-opacity : این دستور نیز برای مرورگرهایی که از موتور پردازشی وب کیت ( نسخه های قدیمی ) استفاده می کردند استفاده می شه نظیر نسخه های قدیمی سافاری.
× مثال بالا کلاس transparent_class را ۵۰% شفاف می کند.
× با توجه به اینکه کاربران گروه سوم و چهارم بسیار کم هستند بنابراین شما می تونید از این دستورات صرف نظر کرده و در کدهای خود از ۲ دستور اول استفاده کنید.
× ترتیب دستورات مهمه.
سوال: من از کد زیر برای شفاف کردن عکس هام وقتی نشانگر موس روشون می ره استفاده کردم ولی در اینترنت اکسپلورر با مشکل مواجه می شم:
a img:hover {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
جواب: متاسفانه در اینترنت اکسپلورر نسخه ۶ دستور hover تنها برای لینک ها کار می کنه بنابراین کد مورد نظر در این مرورگر مشکل خواهد داشت ( مشکلی در نسخه ۷ اینترنت اکسپلورر نمی باشد ).
راه حل: شما می تونید به لینک های مورد نظرتون یک کلاس بدید بعد با توجه به اون کلاس و تگ لینک این دستور را اجرا کنید :
a.transeffect:hover {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
منبع: CSS Tricks
برچسب ها:css،tip،طراحی وب
آذر ۱۳م, ۱۳۸۶ at ۵:۳۶ ق.ظ
چه جالب، ممنون!