آموزش opacity در CSS | آموزش کامل + نمونه کد

قبلی بعدی

ویژگی opacity در CSS

ویژگی opacity، برای تعیین میزان شفافیت المان، مورد استفاده قرار می گیرد.

ویژگی opacity مقداری، بین 0 تا 1 را دریافت می کند. مقدار 0، کاملا شفاف و مقدار 1، غیر شفاف است.

opacity: 1;

opacity: 0.5;

opacity: 0.2;

img {
    opacity: 0.7;
}

نکته: ویژگی opacity، باعث کم رنگ شدن، نمی شود. این ویژگی مانند شیشه، شفاف است و المان های پشت خود را نمایش می دهد.

ویژگی opacity و انتخابگر hover در CSS

با استفاده از انتخابگر hover در ویژگی opacity، می توانیم یک گالری تصویر درست کنیم.

img {
    opacity: 0.5;
}
img:hover {
    opacity: 1.0;
}

تاثیر opacity بر المان های فرزند در CSS

اگر ویژگی opacity را به یک المان اضافه کنیم، تمام المان های فرزند (child) تحت تاثیر مقدار شفافیت (opacity) قرار می گیرند. این امر می تواند برای خواندن متن ها مشکل ایجاد کند. برای درک بهتر، نمونه کد زیر را ببینید.

div {
    opacity: 0.3;
}

میزان شفافیت با کانال آلفا در CSS

با کمک کانال آلفا نیز می توانیم میزان شفافیت رنگ را تعیین کنیم.

div {
    background: rgba(76, 175, 80, 0.3) /* پس زمینه سبز با شفافیت 30 درصد*/
}

نکته: در این روش، المان های فرزند تحت تاثیر مقدار opacity قرار نمی گیرند.

نکته: برای اطلاعات بیشتر، به آموزش رنگ در CSS مراجعه کنید.

خلاصه درس

در این درس با ویژگی شفافیت (Opacity) در CSS:

ویژگی opacity و انتخابگر hover
تاثیر opacity بر المان های فرزند
میزان شفافیت با کانال آلفا

آشنا شدیم.

قبلی بعدی

توسعه دهندگان

احسان اسلامی