در این قسمت از سری آموزش برنامه نویسی وب به سراغ رنگ ها و پس زمینه (background) در سی اس اس(CSS) خواهیم رفت.

قسمت قبلی

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

ویژگی‌های رنگ

برای تعریف رنگ متن و سایر عناصر در CSS از ویژگی‌های زیر استفاده می‌شود:

• color: رنگ متن را مشخص می‌کند.

body { color: #333; }
h1 { color: rgb(26, 115, 232); }

ویژگی‌های پس‌زمینه

CSS قابلیت‌های متعددی برای کنترل پس‌زمینه عناصر ارائه می‌دهد. ویژگی‌های مهم پس‌زمینه شامل موارد زیر است:

1. رنگ پس‌زمینه (background-color)

رنگ پس‌زمینه یک عنصر را مشخص می‌کند.

body { background-color: #f8f9fa; }

2. تصویر پس‌زمینه (background-image)

برای قرار دادن تصویر به عنوان پس‌زمینه استفاده می‌شود.

body { background-image: url('image.jpg'); }

3. تکرار تصویر (background-repeat)

نحوه تکرار تصویر پس‌زمینه را مشخص می‌کند.

• repeat: تکرار در هر دو جهت
• no-repeat: بدون تکرار
• repeat-x: تکرار فقط در جهت افقی
• repeat-y: تکرار فقط در جهت عمودی

body { background-repeat: no-repeat; }

4. موقعیت تصویر (background-position)

موقعیت تصویر پس‌زمینه نسبت به عنصر مشخص می‌شود.

body { background-position: center center; }

5. اندازه تصویر (background-size)

اندازه تصویر پس‌زمینه را تنظیم می‌کند.

• cover: تصویر کل عنصر را پوشش می‌دهد.
• contain: تصویر درون عنصر جا می‌گیرد.

body { background-size: cover; }

6. اتصال تصویر (background-attachment)

نحوه حرکت تصویر پس‌زمینه با اسکرول صفحه را مشخص می‌کند.

• scroll: تصویر همراه صفحه حرکت می‌کند.
• fixed: تصویر ثابت می‌ماند.

body { background-attachment: fixed; }

7. ترکیب چند پس‌زمینه

می‌توان از چند تصویر یا رنگ برای یک عنصر استفاده کرد.

body { background: url('image1.jpg'), url('image2.png'); }

سیستم های رنگی

نام رنگ‌ها: استفاده از نام‌های استاندارد مثل red و blue.
HEX: فرمت #RRGGBB برای ترکیب رنگ‌ها.
RGB: مقادیر عددی برای قرمز، سبز و آبی (مانند rgb(255, 0, 0)).

RGBA: مانند RGB همراه با شفافیت (Alpha).
HSL: تعریف رنگ با فام (Hue)، اشباع (Saturation) و روشنایی (Lightness).
HSLA: مانند HSL همراه با شفافیت.

برای آشنایی بیشتر با سیستم‌های رنگی در CSS، اینجا کلیک کنید.

قسمت بعدی