opacity

با استفاده از ویژگی opacity می توان میزان شفافیت یک عنصر را کنترل کرد. و حتی این شفافیت را تا جایی ادامه داد که عنصر ناپدید شود.

 

مقادیر ویژگی opacity

 

<number>


opacity: <number>

این ویژگی یک مقدار بین 0 تا 1 می پذیرد که مقدار 1 مقدار اولیه است و باعث می شود تا عنصر در حالت عادی خود باشد و مقدار 0 باعث می شود تا عنصر ناپدید شود. مقادیر بین این دو عدد عنصر را نیمه شفاف می کنند.

 
opacity
 

توجه داشته باشیم زمانی که یک عنصر را به یک مقدار شفافیت می رسانیم همان مقدار برای فرزندان آن تنظیم می شود و هیچ راهی نیست تا شفافیت آنها را تغییر داد.

زمانی که یک عنصر مقدار opacity کمتر از یک داشته باشد عنصر برای فرزندانش stacking context بوجود می آورد. این یعنی هیچ عنصری بیرون از این عنصر نمی تواند از نظر z-index بین فرزندان این عنصر قرار بگیرد و بالعکس.

 

مثال

دموی زیر را بررسی کنید:

 

See the Pen yVBbgM by Mojtaba Seyedi (@seyedi) on CodePen.


 

 

پشتیبانی مرورگر ها

نسخه های قبل از ۹ مرورگر اینترنت اکسپلور ویژگی opacity را پشتیبانی نمی کنند اما می توان بصورت زیر عناصر را در این مرورگر شفاف کرد:


filter: alpha(opacity=50);
opacity: 0.5;