ویژگی opacity در CSS

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 پشتیبانی می کنند.