یکی دیگر از امکاناتی که css در اختیار طراحان سایت قرار میدهد، کنترل بر میزان شفافیت تصاویر و عناصر موجود در صفحه است. البته این خصوصیت مربوط به css3 است ولی بهتر دیدیم در همین سری آموزشی آن را توضیح دهیم.
تا قبل از اینکه این خصوصیت به css اضافه شود، برای اینکه بتوانیم بخشی از صفحه وب را به صورت شفاف (طوری که عناصر زیر آن مشخص باشند) نمایش دهیم، مجبور بودیم از تصاویر gif یا png که قابلیت شفاف سازی دارند استفاده کنیم که همین امر سبب میشد تا حجم صفحات طراحی شده به طور چشم گیری افزایش پیدا کند.
اما امروزه با بکارگیری مشخصه ی opacity در css میتوانیم بدون استفاده از تصاویر، این کار را انجام دهیم ولی برای اینکه مرورگرهای قدیمی نیز این مشخصه را پشتیبانی کنند نیاز است تا به صورت جداگانه برای آنها نیز تنظیمات را اعمال کنید.
فرض کنید میخواهید یک تصویر را در صفحه به صورت شفاف نمایش دهید، برای اینکار باید از کد css زیر استفاده کنید:
در مثال بالا، برای انتخابگر img دو حالت تعیین کردیم. در سطر نخست میزان opacity یا شفافیت را برابر نیم ( ۰.۵ ( قرار دادیم. مقداری که میتوانیم به این مشخصه اختصاص دهیم یک عدد بین ۰ تا ۱ است به این معنی که ۰ برابر با کاملا شفاف و ۱ برابر با کاملا کدر (اصل تصویر) میباشد.
این مشخصه توسط مرورگرهای اینترنت اکسپلورر ۹، فایرفاکس، کروم، سافاری و اوپرا شناسایی میشود ولی برای اینترنت اکسپلورر ۸ و قبل از آن معنی ندارد و باید به طور جداگانه تنظیمات آنرا اعمال کنیم برای همین در سطر دوم از قابلیت filter استفاده کردیم.
هنگامی که برای تعیین میزان شفافیت تصویر یا هر عنصری از filter: alpha استفاده میکنیم، مقداری که میتوانیم اختصاص دهیم یک عدد از ۰ تا ۱۰۰ میباشد. پس ۵۰ در سطر دوم دقیقا معادل نیم در سطر نخست است.
در زیر نحوه ی کار با این مشخصه را در عمل مشاهده خواهید کرد.
