گاهی اوقات نیاز داریم تا عناصر قرار گرفته روی یکدیگر را تا حدودی شفاف سازیم تا چیزی که در زیر قرار گرفته است نیز نمایان گردد. برای این منظور به سادگی با استفاده از Property یی تحت عنوان opacity می توان این کار را در سی اس اس (CSS) انجام داد. برای روشن شدن این مطلب ابتدا کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر کد می کنیم:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>asrefonon</title>
<link type="text/css" rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
همانطور که در کد فوق می بینیم اقدام به استفاده از دو تگ <div> کرده ایم و id هایی تحت عناوین box1 و box2 به آن ها اختصاص داده ایم و این در حالی است که هر دو تگ حاوی هیچ محتوایی نمی باشند. در ادامه کدهای سی اس اس (CSS) مرتبط با این تگ ها را به صورت زیر وارد فایل مربوط به کدهای سی اس اس (CSS) می کنیم:
#box1 {
position:absolute;
left:0px;
top:0px;
width:300px;
height:200px;
background-color:red;
}
#box2 {
left:0px;
top:0px;
position:absolute;
width:100px;
height:100px;
background-color:blue;
}
همانطور که در کد فوق می بینیم خصوصیات متفاوتی را برای هر دو تگ <div> در نظر گرفته ایم. برای مشاهده خروجی کدهای اچ تی ام ال و سی اس اس، فایل اچ تی ام ال را داخل مرورگر باز می کنیم:
می بینیم که هر دو باکس روی یکدیگر قرار گرفته اند. حال فرض کنیم قصد داریم تا میزان شفافیت فاکس آبی رنگ را کاهش دهیم تا باکس قرمز رنگ از زیر آن مشخص باشد. برای این منظور کدهای سی اس اس (CSS) خود را به صورت زیر تکمیل می کنیم:
#box1 {
position:absolute;
left:0px;
top:0px;
width:300px;
height:200px;
background-color:red;
}
#box2 {
left:0px;
top:0px;
position:absolute;
width:100px;
height:100px;
background-color:blue;
opacity:0.3;
}
در کد فوق برای box2 از Propertyیی تحت عنوان opacity استفاده کرده ایم و مقدار آن را برابر با ۰.۳ قرار داده ایم. پس از ذخیره کردن فایل، مرورگر خود را به روز رسانی می کنیم:
می بینیم که با اعمال تغییرات فوق باکس آبی شفاف شده است به طوری که از زیر آن باکس قرمز رنگ مشاهده می شود. به خاطر داشته باشیم که همواره برای opacity مقداری مابین مقادیر ۰ و ۱ می توان در نظر گرفت (لازم به ذکر است مقادیری همچون ۰.۱ و ۰.۹ و … مابین این دو عدد قرار می گیرند). علاوه بر این opacity تاثیری روی border نخواهد گذاشت و صرفاً بر پس زمینه اعمال می شود.
