عنصر استانداردی که در css3 برای ایجاد لایه های شفاف تعریف شده، opacity نام دارد که به معنی تاری و کدری است، البته برای مرورگرهای قدیمی تر که از css3 پشتیبانی نمی کنند باید از مقادیر دیگری تحت عنوان ms-filter، filter، moz-opacity و khtml-opacity استفاده کنیم.
ایجاد بلاک و تصور شفاف با عنصر opacity در css3:
کد زیر مثال استاندارد css3 برای ایجاد بلاک یا تصویر شفاف است، عنصر مربوط به filter برای سازگاری با مرورگر اینترنت اکسپلورر 8 و مابعد آن است.
<style type="text/css">
img {
opacity:0.4;
filter:alpha(opacity=40);
}
</style>
ایجاد بلاک و تصور شفاف، سازگار با تمام مرورگرها:
اگرچه خاصیت opacity در css3 به صورت استاندارد تعریف شده است، اما برخی از مرورگرهای قدیمی تر از آن به صورت کامل پشتیبانی نمی کنند، کلاس زیر نمونه ی تقریبا کاملی است که از هر جهت با اکثر مرورگرهای موجود، تطبیق دارد.
.transparent {
width: 100%;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
پیش نمایشتوضیح:
- خط اول کد (width: 100%) برای ورژن های قدیمی مرورگر اکسپلورر (5، 6 و 7) نیاز است (به جای آن می توانید از مقادیر zoom: 1 استفاده کنید).
- مقادیر ms-filter و filter برای ایجاد حالت شفافیت در اینترنت اکسپلورر کاربرد دارد.
- moz-opacity و khtml-opacity برای ورژن های قدیمی مرورگر فایرفاکس (Firefox) و سافاری (Safari) است.
- opacity نیز خاصیتی استاندارد در css3 است.
- مقادیر شفافیت برای مرورگر اکسپلورر به صورت اعدادی بین 0 تا 100 و برای سایر مرورگرها و حالت استاندارد css3، عددی بین 0 تا 1 است.
- به کار بردن این کلاس ممکن است از نظر سیستم های اعتبار سنجی که هنوز خود را با ویژگی های css3 تطبیق نداده اند، موجب نامعتبر تلقی شدن کد css گردد که البته چندان جدی نیست.