opacity Property
ویژگی opacity
در CSS میزان وضوح عنصر را مشخص می کند و نیز تعیین می کند که عنصر یا محتوای پشت عنصرِ مورد نظر، تا چه میزان دیده شود.
نحوه نوشتار
opacity: 1; opacity: 0.3; opacity: 0;
ویژگی opacity
به کل عنصر همراه با محتوای درون آن اعمال می شود. بنابراین عنصر و فرزند آن همگی وضوح یکسانی در رابطه با پس زمینه عنصر دارند.
نکته: اگر بخواهیم تنها وضوح پس زمینه عنصر را جدا از محتوا یا فرزندان آن تغییر دهیم، بشکل زیر عمل می کنیم:
background: rgba(0, 0, 0, 0.5);
در مثال زیر نحوه عملکرد این ویژگی را میبینیم:
html
<div> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam iste quaerat distinctio, explicabo ut delectus error exercitationem veniam blanditiis? Natus voluptatem asperiores exercitationem fuga consequuntur labore eos nobis placeat id! <div class="box op1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div> </div> <div> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam iste quaerat distinctio, explicabo ut delectus error exercitationem veniam blanditiis? Natus voluptatem asperiores exercitationem fuga consequuntur labore eos nobis placeat id! <div class="box op2"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div> </div>
css
body > div { margin-top: 25px; } div { width: 200px; height: 200px; background-color: coral; position: relative; padding: 13px; } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgb(144, 238, 144); width: 150px; height: 150px; padding: 13px; font: bold 21px tahoma; color: blue; } .op1 { opacity: 0.4; } .op2 { background: rgba(144, 238, 144, 0.4); }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی در CSS پشتیبانی می کنند.