الگوریتم اول

لطفا صبر کنید...

رنگ‌ها و پس‌زمینه‌ها در CSS

عالیه! رنگ‌ها و پس‌زمینه‌ها از بخش‌های مهم استایل‌دهی در CSS هستن. بیا یه مرور سریع داشته باشیم:

رنگ‌ها در CSS

برای تعیین رنگ عناصر می‌تونیم از نام رنگ، کد هگزادسیمال، RGB، RGBA، HSL و HSLA استفاده کنیم:

/* استفاده از نام رنگ */
color: red;

/* استفاده از کد هگزادسیمال */
color: #ff5733;

/* استفاده از RGB */
color: rgb(255, 87, 51);

/* استفاده از RGBA (با شفافیت) */
color: rgba(255, 87, 51, 0.5);

/* استفاده از HSL */
color: hsl(15, 100%, 60%);

/* استفاده از HSLA (با شفافیت) */
color: hsla(15, 100%, 60%, 0.5);

پس‌زمینه در CSS

برای استایل دادن به پس‌زمینه از ویژگی‌های مختلفی مثل رنگ، تصویر، گرادینت و تنظیمات پس‌زمینه استفاده می‌کنیم:

/* رنگ پس‌زمینه */
background-color: lightblue;

/* تصویر پس‌زمینه */
background-image: url('background.jpg');

/* اندازه تصویر پس‌زمینه */
background-size: cover; /* کل صفحه رو پر می‌کنه */
background-size: contain; /* کل تصویر رو نشون می‌ده بدون برش */

/* موقعیت تصویر پس‌زمینه */
background-position: center; /* وسط صفحه */
background-position: top left; /* بالا سمت چپ */

/* تکرار تصویر پس‌زمینه */
background-repeat: no-repeat; /* بدون تکرار */
background-repeat: repeat-x; /* فقط در محور افقی */
background-repeat: repeat-y; /* فقط در محور عمودی */

/* گرادینت خطی */
background-image: linear-gradient(to right, red, yellow);

/* گرادینت دایره‌ای */
background-image: radial-gradient(circle, red, yellow);

پس‌زمینه چندلایه

می‌تونیم چند لایه پس‌زمینه روی هم داشته باشیم:

background: url('pattern.png') repeat, linear-gradient(to right, red, yellow);