رنگها و پسزمینهها در 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);
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-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);
