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

[تیم اسان وب]

در فرمت PNG می توانیم شفافیت (Opacity) تصویر را تغییر دهیم.
اما متاسفانه مروگر IE6 از این فرمت بطور پیش فرض پشتیبانی نمی کند و اغلب کاربران در ایران از این مروگر قدیمی و آسیب پذیر استفاده می کنند.
به همین علت، هنوز استفاده از PNG برای تنظیم شفافیت (Opacity) راهکار مناسبی نیست و می توان از سی اس اس برای تنظیم شفافیت (Opacity) در تصاویر استفاده کرد.
استفاده از سی اس اس برای تنظیم شفافیت (Opacity) یک حسن دیگری نیز دارد
و آن این است که اگر شما به دو تصویر با شفافیت ۷۰% و ۱۰۰% نیاز داشته باشید
می توانید فقط از یک تصویر استفاده کنید و فقط شفافیت ها را در سی اس اس تغییر دهید.
البته متاسفانه تا زمان نگارش این مقاله هنوز w3c این خصیصه CSS را Valid نکرده است.
نکنته مهم این است کدی که برای تنظیم 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;
}