ویژگی opacity در css
ویژگی opacity، برای تعیین میزان شفافیت یک المان مورد استفاده قرار می گیرد.
opacity 1
opacity 0.5
opacity 0.2
img {
opacity: 0.5;
}
نکته: ویژگی opacity می تواند مقداری از 0.0 تا 1.0 و یا 0% تا 100% را بپذیرد. هرچه مقدار کمتر باشد شفافیت، بیشتر است.
ویژگی opacity و انتخابگر hover در CSS
با استفاده از انتخابگر hover در ویژگی opacity، می توانید هنگام حرکت اشاره گر موس بر روی المان مورد نظر، میزان تغییر شفافیت را ببینید.
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}تاثیر opacity بر المان های فرزند در CSS
اگر ویژگی opacity را به backgroung یک المان اضافه کنیم، تمام المان های فرزند (child) تحت تاثیر مقدار شفافیت (opacity) قرار می گیرند.
div {
opacity: 0.4;
}میزان شفافیت با کانال آلفا در CSS
با کمک کانال آلفا (RGBA) نیز می توانید میزان شفافیت (opacity) یک المان را تعیین کنید.
div {
background: rgba(76, 175, 80, 0.3) /* پس زمینه سبز با شفافیت 30 درصد*/
}
نکته: در این روش دیگر المان های فرزند تحت تاثیر مقدار opacity قرار نمی گیرند.
توسعه دهندگان
احسان اسلامی
