در CSS، بیش از 140 نام رنگ، مقادیر رنگ HEX، مقادیر رنگ RGB، مقادیر رنگ RGBA، مقادیر رنگ HSL، مقادیر رنگ HSLA و خاصیت opacity پشتیبانی می‌شود.
رنگ‌های RGBA
مقادیر رنگ RGBA نسخه‌ای از مقادیر رنگ RGB با یک کانال آلفا هستند که میزان شفافیت یک رنگ را مشخص می‌کند. یک مقدار رنگ RGBA به شکل زیر تعریف می‌شود:
rgba(red, green, blue, alpha);پارامتر آلفا عددی بین 0.0 (کاملاً شفاف) تا 1.0 (کاملاً کدر) است.
نمونه‌ای از مقادیر RGBA:
rgba(255, 0, 0, 0.2); /* قرمز با شفافیت 20% */
rgba(255, 0, 0, 0.4); /* قرمز با شفافیت 40% */
rgba(255, 0, 0, 0.6); /* قرمز با شفافیت 60% */
rgba(255, 0, 0, 0.8); /* قرمز با شفافیت 80% */مثال از رنگ‌های 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);} /* آبی با شفافیت */رنگ‌های HSL
HSL مخفف Hue (رنگ)، Saturation (اشباع) و Lightness (روشنی) است.
- Hue زاویه‌ای روی دایره رنگ است (از 0 تا 360 درجه):
- 0 (یا 360) قرمز است.
- 120 سبز است.
- 240 آبی است.
- Saturation درصدی است که میزان خلوص رنگ را نشان می‌دهد (100٪ بالاترین خلوص رنگ است).
- Lightness درصدی است که روشنی رنگ را مشخص می‌کند (0٪ سیاه و 100٪ سفید است).
نمونه‌ای از مقادیر HSL:
hsl(0, 100%, 30%); /* قرمز تیره */
hsl(0, 100%, 50%); /* قرمز طبیعی */
hsl(0, 100%, 70%); /* قرمز روشن */مثال از رنگ‌های HSL:
#p1 {background-color: hsl(120, 100%, 50%);} /* سبز طبیعی */
#p2 {background-color: hsl(120, 100%, 75%);} /* سبز روشن */
#p3 {background-color: hsl(120, 100%, 25%);} /* سبز تیره */رنگ‌های HSLA
مقادیر رنگ HSLA مشابه HSL هستند با این تفاوت که یک کانال آلفا برای شفافیت اضافه شده است.
نمونه‌ای از مقادیر HSLA:
hsla(0, 100%, 30%, 0.3); /* قرمز تیره با شفافیت */
hsla(0, 100%, 50%, 0.3); /* قرمز طبیعی با شفافیت */مثال از رنگ‌های HSLA:
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* سبز با شفافیت */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* سبز روشن با شفافیت */خاصیت Opacity
خاصیت opacity میزان شفافیت یک عنصر را تنظیم می‌کند (هم رنگ پس‌زمینه و هم متن شفاف می‌شوند).
مقدار این خاصیت باید عددی بین 0.0 (کاملاً شفاف) تا 1.0 (کاملاً کدر) باشد.
نمونه‌ای از مقدار opacity:
opacity: 0.6; /* شفافیت 60% */مثال از خاصیت 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;} /* آبی با شفافیت */
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام