ایجاد بلاک و تصویر شفاف (Transparent) با استفاده از CSS3

معرفی خاصیت Opacity در CSS3

Opacity نخستین خاصیت استانداردی بود که برای ایجاد لایه های شفاف در CSS3 معرفی شد، این عبارت در لغت به معنی تاری و کدری است که به همین دلیل برای نامگذاری خاصیت ایجاد عناصر شفاف در CSS از آن استفاده شده است، Opacity در مرورگرهای امروزی به خوبی پشتیبانی می شود اما برای سازگاری با مرورگرهای قدیمی تر که از CSS3 پشتیبانی نمی کنند باید از خاصیت های اختصاصی ms-filter، filter، moz-opacity و khtml-opacity استفاده کنیم.

معرفی پارامتر Alpha برای خاصیت Background در CSS3

استفاده از کانال Alpha برای ایجاد پس زمینه شفاف در استاندارد RGB و کارهای گرافیکی از سال ها پیش مرسوم بوده است، اما پیشینه استفاده از این تکنیک در وب به معرفی تابع rgba در CSS3 برمی گردد، rgba تابعی است که جهت مقداردهی خاصیت Background می توانیم از آن استفاده کنیم، با استفاده از این قابلیت می توانیم علاوه بر کنترل سه رنگ اصلی Red، Green، Blue بر روی کانال Alpha که میزان شفافیت عنصر را مشخص می کند نیز در خاصیت Background کنترل داشته باشیم، لذا استفاده از این شیوه در کنار خاصیت Opacity دو گزینه جهت ایجاد عناصر شفاف (Transparent) در وب است.

تفاوت استفاده از Opacity و Alpha

هر دو روش Opacity و Alpha در ایجاد عناصر شفاف در وب کاربرد دارند با این تفاوت که در روش Opacity شفافیت علاوه بر عنصر والد (Parent) به تمام عناصر زیرمجموعه و فرزند (Child) نیز نسبت داده می شود، به طور مثال اگر برای بلاک div از خاصیت Opacity استفاده کنیم متن تگ p که درون تگ div قرار دارد نیز به همان صورت شفافیت را به ارث می برد و در حال حاضر این حالت غیر قابل تغییر است، اما در مورد پارامتر Alpha در حالت RGBA شفافیت صرفا بر روی عنصر هدف اعمال می شود و به عناصر زیرمجموعه سرایت نمی کند، علاوه بر این خاصیت Opacity هم برای رنگ و هم تصویر پس زمینه قابل استفاده است اما کانال Alpha در تابع rgba صرفا بر روی رنگ پس زمینه موثر است، با این توضیحات می توانیم بر طبق نیاز یکی از روش های گفته شده را استفاده کنیم.

ایجاد بلاک و تصویر شفاف با خاصیت Opacity در CSS3

کد زیر نمونه اولیه ایجاد بلاک و تصویر شفاف با خاصیت Opacity در CSS3 است، در این کد مقدار 0.5 برای میزان شفافیت در نظر گرفته شده است (مقدار Opacity می تواند از 0 تا 1 در نوسان باشد)، خاصیت مربوط به filter نیز برای سازگاری با مرورگر اینترنت اکسپلورر 8 و مابعد آن است.

<style type="text/css">
img {
    opacity:0.5;
    filter:alpha(opacity=50);
}
</style>

در نمونه کد بالا خاصیت Opacity را در سلکتور img استفاده کرده ایم که با این کار تمام تصاویر صفحه 50% شفافیت خواهند داشت (مقادیر 1 وضوح کامل است که با گام های 0.1 می توانیم وضوح را کاهش و شفافیت را افزایش دهیم، به طور مثال 0.9، 0.8 و...، برای filter:alpha این مقادیر از 100 محاسبه می شوند).

ایجاد بلاک و تصور شفاف با خاصیت Opacity، سازگار با تمام مرورگرها

معرفی رسمی خاصیت Opacity در CSS3 صورت گرفت و به همین دلیل برخی مرورگرهای قدیمی تر از آن به طور کامل پشتیبانی نمی کنند، برای سازگاری این قبیل مرورگرها و اطمینان از اینکه استایل مد نظرمان به درستی برای همه کاربران پردازش می شود نمونه کد بالا را با پارامترهایی مانند ms-filter، moz-opacity و khtml-opacity توسعه می دهیم، به این صورت نسخه های قدیمی مرورگرهای اینترنت اکسپلورر، موزیلا فایرفاکس، سافاری و... از حالت شفافیت با خاصیت Opacity پشتیبانی خواهند کرد.

.transparent-opacity {
    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) است.
- مقادیر شفافیت برای مرورگر اکسپلورر به صورت اعدادی بین 0 تا 100 و برای سایر مرورگرها و در حالت استاندارد CSS3 عددی بین 0 تا 1 با گام های 0.1 است.
- به کاربردن این کلاس ممکن است از نظر سیستم های اعتبار سنجی که هنوز با ویژگی های CSS3 سازگاری ندارند، موجب نامعتبر تلقی شدن کدنویسی استایل CSS گردد که البته به لحاظ سئو فاکتور خیلی مهمی نیست.

ایجاد بلاک شفاف با پارامتر Alpha در CSS3

در طراحی صفحات وب گاهی صرفا پس زمینه بلاک حالت شفافیت و کم رنگی دارد و سایر عناصر از جمله متن، تصویر و... با وضوح عادی و شفافیت نرمال هستند، در این صورت استفاده از Opacity گزینه مناسبی نیست و باید از قابلیت دیگری در CSS تحت عنوان کانال Alpha استفاده کنیم، کانال Alpha در CSS3 و تابع rgba برای خاصیت Background در نظر گرفته شده است که به صورت مقادیری از 0 تا 1 با گام های 0.1 متغیر است، این پارامتر به عنوان آرگیومنت چهارم تابع rgba مقداردهی می شود، تابع rgba صرفا برای رنگ پس زمینه قابل استفاده است و تاثیری روی تصویر پس زمینه نخواهد داشت.

.transparent-rgba {
    background-color: rgba(0, 0, 0, 0.5);
}

توضیح:
- به طور کلی رنگ ها در CSS به چند روش مختلف قابل استفاده هستند از جمله کدهای Hexadecimal، توابع rgb، rgba، hsl، hsla و رنگ های از پیش تعریف شده (Predefined) مانند Red، Green، Blue و... که در تمام مرورگرها پشتیبانی می شوند.
- در روش RGBA که اکستنشنی از RGB است، سه مقدار اول عددهای مربوط به سه رنگ اصلی قرمز، سبز و آبی را مشخص می کنند (مقادیری از 0 تا 255) و عدد چهارم میزان شفافیت کانال Alpha را تعیین می کند (مقداری از 0 تا 1).
- امکان استفاده از تابع rgba صرفا برای خاصیت Background و Background-color وجود دارد.
- روش RGBA صرفا رنگ پس زمینه را تحت تاثیر قرار می دهد و بر روی سایر عناصر صفحه از جمله متن و تصویر تاثیری ندارد.
- یک نمونه عملی از این روش ایجاد شفافیت می تواند استفاده به عنوان کادر متن توضیحات گالری تصاویر در صفحات وب باشد.

مثال و پیش نمایش آنلاین

بحث ایجاد بلاک و تصویر شفاف (Transparent) با استفاده از CSS3 را با بررسی یک مثال و پیش نمایش آنلاین آن به پایان می بریم.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | بلاک و تصویر شفاف با CSS</title>
<!-- Webgoo.ir -->
<style type="text/css">
html, body {
    margin: 0px;
    padding: 0px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
    line-height:22px;
}
.transparent-wrap {
    display:inline-block;
    background: #A4BC1C;
    width: 200px;
    height: 200px;
}
.transparent-text {
    color: #FFFD00;
}
.transparent-opacity {
    background-color: #000000;
    zoom: 1; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}
.transparent-rgba {
    background-color: rgba(0, 0, 0, 0.5);
}
</style>
<script type="text/javascript">
function getSetRang(rang_id, opacity_id, rgba_id, value_id){
    var value = document.getElementById(rang_id).value;
    
    document.getElementById(opacity_id).style.opacity = value;
    document.getElementById(rgba_id).style.backgroundColor = "rgba(0, 0, 0, " + value + ")";
    document.getElementById(value_id).innerHTML = value;
}
</script>
</head>
<body>
<div class="transparent-wrap">
<div id="transparent-opacity" class="transparent-opacity">
<p class="transparent-text">
متن با پس زمینه شفاف - خاصیت Opacity و Filter
</p>
</div>
</div>
<div class="transparent-wrap">
<div id="transparent-rgba" class="transparent-rgba">
<p class="transparent-text">
متن با پس زمینه شفاف - کانال Alpha روش RGBA
</p>
</div>
</div>
<hr>
<label for="transparent-rang">تغییر میزان شفافیت:</label>
<input id="transparent-range" type="range" min="0" max="1" step="0.1" value="0.5" dir="ltr" oninput="getSetRang(this.id, 'transparent-opacity', 'transparent-rgba', 'transparent-value');" onchange="getSetRang(this.id, 'transparent-opacity', 'transparent-rgba', 'transparent-value');">
<br>
میزان فعلی شفافیت: <span id="transparent-value">0.5</span>
<br>
- برای مشاهده تفاوت و بررسی تاثیر تغییرات روش Opacity و روش RGBA بر عناصر صفحه می توانیم از Range اسلایدر بالا استفاده کنیم (صرفا سازگار با مرورگرهایی که از HTML5 پشتیبانی می کنند!).
<br>
- برای سازگاری با تمام مرورگرها از خاصیت Filter و Opacity در کنار هم استفاده کرده ایم.
<br>
- همان طور که گفتیم شفافیت در خاصیت Opacity به صورت کلی بر روی عنصر والد و عناصر فرزند اعمال می شود (شامل متن، رنگ و تصویر پس زمینه) که در این مثال نیز با تغییر میزان شفافیت بلاک div اصلی متن درون آن (تگ p) به همان صورت تغییر می کند، اما در صورت استفاده از کانال Alpha در روش RGBA میزان شفافیت صرفا روی رنگ پس زمینه عنصر هدف تاثیرگذار است و سایر عناصر صفحه وب از جمله متن و تصاویر را شامل نمی شود.
</body>
</html>

پیش نمایش