opacity

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

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

<number>

opacity: <number>

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

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

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

مثال

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

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

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

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

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