تفاوت opacity و rgba

طراحان و توسعه دهندگان وب اغلب rgba (و معادل hsla آن) را با opacity اشتباه می گیرند و آنها را بجای یکدیگر استفاده می کنند، تا زمانیکه نتیجه را مشاهده کنند .

این قابل درک است، زیرا opacity و یک جزء از rgba هر دو به یک کیفیت اشاره می کنند : میزان شفافیت (transparency).

با این حال، کاربرد و اثر آنها بسیار متفاوت است:

Opacity خودش یک خاصیت است، در حالیکه rgba جزئی از یک خصوصیت رنگ است

مثل background-color، box-shadow-color و یا border-color .

مهم تر از همه، opacity روی کل عنصری که به آن اعمال می شود تاثیر می گذارد، در حالیکه rgba فقط یک جنبه را تحت تاثیر قرار می دهد.

میتوان opacity را به عنوان یک محو کننده برای عناصر در نظر گرفت. به عنوان مثال بیایید دو عنصر div را با استفاده از خاصیت position: absolute روی هم قرار دهیم. هر دو div دارای متن سفید هستند. پس زمینه div اول آبی تیره است، پس زمینه div دیگر مشکی است و حاوی یک عکس می باشد.

کد HTML:

<div id=lower><p>There is nothing wrong with your television set. Do not attempt to adjust the picture. We are controlling the transmission. We will control the horizontal, we will control the vertical.</p></div>

<div id=upper><p><img src=the-twilight-zone.png alt="The Twilight Zone">We can change the focus to a soft blur or sharpen it to crystal clarity. For the next hour, sit quietly and we will control all that you see and hear.</p></div>

کد CSS

body { background: #444; }

div { width: 20em; padding: 3em; position: absolute; border: 5px double #000; color: white; }

div p { margin: 0; text-align: justify; }

div#lower { background-color: rgb(0, 0, 127); }

div img { width: 200px; height: 150px; float: right; margin-left: 3em;margin-bottom: 3em; }

div#upper { left: 18em; top: 8em; background-color: rgba(0, 0, 0, 1); }

ما مقدار آلفا (alpha) را برای <div id=upper> به 0 کاهش می دهیم. دقت کنید که متن، حاشیه و تصویر دست نخورده باقی می مانند. این تغییرات فقط روی رنگ پس زمینه <div id=upper> تاثیر می گذارد.

وقتی مقدار آلفا را برای background-color، 0 قرار می دهیم به این معنی است که اهمیتی ندارد چه مقداری را برای قرمز، سبز یا آبی قرار می دهیم. در این حالت، background-color کاملا شفاف (transparent) است.

div#upper { left: 17em; top: 7em; background-color: rgba(255, 255, 0, 0.5); }

اجازه دهید background-color را دوباره به حالت اول برگردانیم و opacity را معرفی کنیم. ابتدا مقدار 1 را برای opacity تنظیم می کنیم، تغییری ایجاد نمی شود. اما مقدار 0.25 تغییر چشمگیری را ایجاد می کند. همانطور که می بینید میزان شفافیت کل div شامل رنگ پس زمینه، محتوای پاراگراف، حاشیه و تصویر به نصف رسیده. بدیهی است که این افکت با افکت قبلی متفاوت است.