ویژگی opacity در CSS
ویژگی opacity، برای تعیین میزان شفافیت المان مورد استفاده قرار می گیرد.
ویژگی opacity مقداری بین 0 تا 1 دریافت می کند. مقدار 0 کاملا شفاف و مقدار 1 غیر شفاف است.
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 مراجعه کنید.
احسان اسلامی
