تابع hsla() در CSS نسخه پیشرفته تابع hsl است که یک پارامتر Alpha برای تعیین شفافیت رنگ اضافه میکند. با hsla میتوانید رنگها را دقیقتر و با امکان شفافیت دلخواه در طراحی وب استفاده کنید. برای یادگیری کامل CSS و مثالهای عملی، به دوره آموزش CSS مراجعه کنید.
پارامترهای تابع hsla
| پارامتر | توضیح |
|---|---|
| Hue | زاویه رنگ بر حسب درجه (0° = قرمز، 120° = سبز، 240° = آبی) |
| Saturation | شدت رنگ بر حسب درصد (0% = خاکستری، 100% = رنگ کامل) |
| Lightness | روشنایی رنگ بر حسب درصد (0% = سیاه، 50% = رنگ خالص، 100% = سفید) |
| Alpha | شفافیت رنگ بین 0 تا 1 (0 = کاملاً شفاف، 1 = کاملاً غیر شفاف) |
مثال عملی تابع hsla
.box {
background-color: hsla(200, 70%, 50%, 0.6);
width: 200px;
height: 200px;
}نکات مهم
- Alpha مقدار شفافیت رنگ را کنترل میکند و برای overlay و افکتهای نیمه شفاف کاربرد دارد.
- پارامترهای Hue، Saturation و Lightness همانند تابع hsl هستند.
- میتوان hsla را با دیگر توابع رنگی مانند rgb و hsl ترکیب کرد.
- پشتیبانی مرورگرها از hsla مشابه hsl است و اکثر مرورگرهای مدرن پشتیبانی کامل دارند.
ادامه آموزش
برای یادگیری کامل توابع رنگ در CSS و ایجاد طراحیهای حرفهای، حتماً دوره آموزش CSS را مشاهده کنید.
آموزش قبلی: آموزش تابع hsl در CSS
آموزش بعدی: آموزش تابع rgb در CSS
دیدگاه و پرسش