رنگ های پیشرفته CSS (Colors - Advanced)
در این راهنما با «رنگ های پیشرفته CSS» آشنا می شوید؛ از RGBA و HSLA تا ویژگی «opacity». برای مرور سریع، صفحه رنگ های پیشرفته CSS را نشان گذاری کنید.
رنگ های RGBA
RGBA نسخه توسعه یافته «رنگ های RGB» با کانال آلفا است که شفافیت را مشخص می کند. مقدار آلفا بین 0 تا 1 بوده و هرچه بزرگ تر باشد، رنگ مات تر است.
#p1 { background-color: rgba(255, 0, 0, 0.3); } /* قرمز نیمه شفاف */ #p2 { background-color: rgba(0, 255, 0, 0.3); } /* سبز نیمه شفاف */ #p3 { background-color: rgba(0, 0, 255, 0.3); } /* آبی نیمه شفاف */نکته: برای تعریف چندین رنگ پس زمینه در کنار RGBA می توانید از «پس زمینه - چندگانه» کمک بگیرید.
رنگ های HSLA
HSLA نیز مانند HSL است اما کانال آلفا دارد. «hue» زاویه رنگ، «saturation» میزان اشباع و «lightness» روشنی را تعیین می کند؛ سپس آلفا شفافیت را کنترل می کند.
#p1 { background-color: hsla(120, 100%, 50%, 0.3); } /* سبز با شفافیت */ #p2 { background-color: hsla(120, 100%, 75%, 0.3); } /* سبز روشن */ #p3 { background-color: hsla(120, 100%, 25%, 0.3); } /* سبز تیره */ #p4 { background-color: hsla(120, 60%, 70%, 0.3); } /* سبز پاستلی */هشدار: استفاده بیش ازحد از شفافیت می تواند خوانایی متن را کم کند؛ حتماً کنتراست را بررسی کنید.
ویژگی opacity
ویژگی «opacity» شفافیت کل عنصر را تغییر می دهد؛ یعنی هم پس زمینه و هم متن تحت تأثیر قرار می گیرند. مقدار آن بین 0 تا 1 است.
#a { background-color: rgb(255, 0, 0); opacity: 0.6; } #b { background-color: rgb(0, 255, 0); opacity: 0.6; } #c { background-color: rgb(0, 0, 255); opacity: 0.6; }نکته: اگر نمی خواهید متن هم شفاف شود، به جای opacity از رنگ های RGBA یا HSLA برای background-color استفاده کنید.
ادامه مطالعه و منابع
برای کنترل ناحیه رنگ پس زمینه، بخش کلیپ پس زمینه را ببینید. همچنین لیست کلیدواژه های رنگ CSS به انتخاب سریع رنگ کمک می کند. برای مرجع عمیق تر به RGBA در MDN و opacity در MDN مراجعه کنید.