طراحی وب سایت ضابط

تنظیم شفافیت (Opacity) تصاویر با سی اس اس

همانطور که می دانید می توانیم، در وب از تصاویرهایی با فرمت های JPEG, GIF, PNG استفاده کنیم. خوشبختانه در فرمت PNG می توانیم شفافیت (Opacity) تصویر را تغییر دهیم، اما متاسفانه مروگر IE6 از این فرمت بطور پیش فرض پشتیبانی نمی کند و بازهم متاسفانه اغلب کاربران در ایران از این مروگر قدیمی و آسیب پذیر استفاده می کنند و هنوز مروگر خودشان را آپدیت نکرده اند.
به همین علت ، هنوز استفاده از PNG برای تنظیم شفافیت (Opacity) راهکار مناسبی نیست و می توان از سی اس اس برای تنظیم شفافیت (Opacity) در تصاویر استفاده کرد.
استفاده از سی اس اس برای تنظیم شفافیت (Opacity) یک حسن دیگری نیز دارد و آن این است که اگر شما به دو تصویر با شفافیت ۷۰% و ۱۰۰% نیاز داشته باشید می توانید فقط از یک تصویر استفاده کنید و فقط شفافیت ها را در سی اس اس تغییر دهید.
نکنته مهم این است کدی که برای تنظیم Opacity یا همان شفتافیت استفاده می کنید در تمام مروگر ها کار کند.
برای این منظور از کد زیر استفاده کنید و فقط مقادیر شفافیت را تغییر دهید:

.transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
}

مولف: میثم ضابط

مطالب مرتبط


ارسال یک نظر




کد امنیتی:

طراحی سایت ایمیل و پشتیبانی

ارسال خودکار مطالب با خبرنامه

لطفا برای تکمیل عضویت، لینک ایمیل فعالسازی را کلیک کنید

آخرین مطالب طراحی سایت ضابط

آخرین دیدگاه های طراحی سایت ضابط

درج آگهی رایگان
پنجشنبه ۱۱ شهریور ۱۳۸۹