تفاوت opacity و rgba

توسعه دهندگان و افرادی که طراحی سایت را برعهده دارند اکثرا rgba را با opacity اشتباه میگیرند و آن ها را با یکدیگر اشتباه میگیرند. تا هنگامی که نتیجه کار خود را مشاهده کنند. این فایل درک میباشد چون که opacity و یک جز از rgba به یک کیفیت اشاره میکنند، میزان شفافیت. اما کاربرد و اثرات آن بسیار متفاوت میباشد در این مقاله سعی داریم تا به شما تفاوت opacity و rgba را بگوییم. Opacity یک خاصیت میباشد، در حالیکه rgba بخشی از یک خصوصیت رنگ است همانند background-color، box-shadow-color و یا border-color . و اما مهم ترین آن opacity روی کل تمام عنصری که به آن اعمال می شود تاثیر می گذارد، با این حال که rgba تنها یک جنبه را تحت تاثیر قرار می دهد. opacity را میتوانید به عنوان یک محو کننده برای عنصرها در نظر بگیرید. میتوان آن را به عنوان یک محو کننده برای عناصر در نظر گرفت.

تفاوت opacity و rgba

کد HTML:

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.

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.

کد 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); }

در اینجا آلفا را برای به ۰ را باید کاهش دهید. توجه داشته باشید که متن، حاشیه و تصویر دست نخورده میماند این ویرایشات تنها روی رنگ پس زمینه تاثیر می گذارد. هنگامی که مقدار آلفا را برای background-color، ۰ قرار میدهید به این معنی میباشد که اهمیتی ندارد که چه مقداری راب رای قرمز سبز و یا آّی قرار میدهیم دراین وضعیت background-color کاملا شفاف (transparent) میباشد.

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