آموزش CSS – آشنایی با Property یی تحت عنوان opacity در سی اس اس (CSS) (جلسه ۳۵)

گاهی اوقات نیاز داریم تا عناصر قرار گرفته روی یکدیگر را تا حدودی شفاف سازیم تا چیزی که در زیر قرار گرفته است نیز نمایان گردد. برای این منظور به سادگی با استفاده از 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> در نظر گرفته ایم. برای مشاهده خروجی کدهای اچ تی ام ال و سی اس اس، فایل اچ تی ام ال را داخل مرورگر باز می کنیم:

opacity

می بینیم که هر دو باکس روی یکدیگر قرار گرفته اند. حال فرض کنیم قصد داریم تا میزان شفافیت فاکس آبی رنگ را کاهش دهیم تا باکس قرمز رنگ از زیر آن مشخص باشد. برای این منظور کدهای سی اس اس (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_in_css

می بینیم که با اعمال تغییرات فوق باکس آبی شفاف شده است به طوری که از زیر آن باکس قرمز رنگ مشاهده می شود. به خاطر داشته باشیم که همواره برای opacity مقداری مابین مقادیر ۰ و ۱ می توان در نظر گرفت (لازم به ذکر است مقادیری همچون ۰.۱ و ۰.۹ و … مابین این دو عدد قرار می گیرند). علاوه بر این opacity تاثیری روی border نخواهد گذاشت و صرفاً بر پس زمینه اعمال می شود.

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)