شفافیت در CSS

با استفاده از ویژگی شفافیت CSS می توانید سطح شفافیت سفارشی را برای یک عنصر تعریف کنید:

div {
    opacity: 0.6;
}

سطح کدورت یا شفافیت در CSS برای کل عنصر ، از جمله متن و سایر محتوای آن اعمال می شود.

الزامات نحو

برای تعریف شفافیت برای یک عنصر ، مثال نحوی زیر را دنبال کنید:

تیرگی: آلفا؛

سطح آلفا یک عدد بدون واحد در محدوده 0.0 (شفافیت کامل CSS) تا 1.0 (کدورت کامل CSS) است. 1.0 نیز مقدار پیش فرض این ویژگی است.

گزینه های جایگزین شفافیت CSS:

روش دیگر برای تغییر تیرگی برای یک عنصر استفاده از ویژگی فیلتر است. در مثال زیر ، می توانید ببینید که چگونه می توان از فیلتر کردن برای تنظیم سطوح مختلف کدورت رنگ پس زمینه CSS استفاده کرد:

div {
    background-color: #41caf4;
    padding: 15px;
}

div.first {
    opacity: 0.2;
    filter: alpha(opacity=20); /* For IE8 and earlier */
}

div.second {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

div.third {
    opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
}

همچنین می توانید رنگی را که می خواهید استفاده کنید در مقادیر RGBA یا HSLA تعریف کنید. A در کلمات اختصاری مخفف کانال alpha است که به عنوان مقدار چهارم تعریف می شود. در مثال زیر ببینید که چگونه روی تیرگی رنگ پس زمینه CSS تأثیر می گذارد:

div {
    background: rgb(80, 180, 90);
    padding: 10px;
}

div.firstly {
    background: rgba(80, 180, 90, 0.2);
}

div.secondly {
    background: rgba(80, 180, 90, 0.4);
}

div.thirdly {
    background: rgba(80, 180, 90, 0.8);
}

همچنین می توانید با استفاده از JavaScript شفافیت را تغییر دهید:

function LearnFunction(z) {
// Return the selected option's text
    var opacityL = z.options[z.selectedIndex].text;
    var ell = document.getElementById("p1");
    if (ell.style.opacityL !== undefined) {
        ell.style.opacityL = opacityL;
    } else {
        alert("This example is unsupported!");
    }
}

پشتیبانی از مرورگر

این تگ در مرورگرهای IE ، safari ، firefox، cherom، opera وEdge پشتیبانی می شود.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.