رنگ ها (Colors)
در CSS، «رنگ ها (Colors)» را با نام، HEX، RGB/RGBA، HSL/HSLA و «شفافیت (Opacity)» می سازیم. RGBA و HSLA یک «کانال آلفا (Alpha)» دارند؛ یعنی میزان شفافیت بین 0 تا 1.
رنگ های RGBA
«RGBA» یعنی «قرمز، سبز، آبی، آلفا». آلفا شفافیت است. صفر کاملاً شفاف، یک کاملاً مات. مثل برگه های شفاف روی هم.
نمونه RGBA با پس زمینه
#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);
}
رنگ های HSLA
«HSLA» یعنی «فام (Hue)، اشباع (Saturation)، روشنی (Lightness)، آلفا». مثل انتخاب رنگ در چرخه رنگ و بعد شفافیت.
نمونه HSLA با درجات مختلف
#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» شفافیت کل عنصر را تنظیم می کند. یعنی هم پس زمینه و هم نوشته باهم کم رنگ می شوند.
نمونه opacity روی عنصر
#p1 {
background-color: rgb(255, 0, 0);
opacity: 0.6;
}
#p2 {
background-color: rgb(0, 255, 0);
opacity: 0.6;
}
#p3 {
background-color: rgb(0, 0, 255);
opacity: 0.6;
}
نکته: اگر فقط پس زمینه شفاف می خواهی، از RGBA/HSLA در background-color استفاده کن؛ نه از opacity.
گام های عملی سریع
- یک
divبساز و متن بگذار. - پس زمینه را با RGBA یا HSLA رنگ کن.
- برای مقایسه، یک بار هم
opacityبگذار.
برای کار با پس زمینه ها، سراغ پس زمینه های چندگانه و اندازه پس زمینه برو. همین صفحه رنگ ها را هم نشانه گذاری کن.
جمع بندی سریع
- RGBA/HSLA فقط پس زمینه را شفاف می کنند.
- opacity کل عنصر را شفاف می کند.
- آلفا بین 0 و 1 تنظیم می شود.
- HSLA برای طراحی دقیق عالی است.