پس زمینه (Backgrounds)
ویژگی های «پس زمینه (Background)» در CSS برای ساخت افکت پشت المان هاست. یعنی رنگ، تصویر، تکرار، موقعیت و شفافیت. مثل پس زمینه صفحه موبایل که عکس دارد و جایگاهش مهم است.
معرفی ویژگی های پس زمینه
مهم ترین ها: background-color، background-image، background-repeat، background-attachment، background-position و شورت هند background.
background-color؛ رنگ پس زمینه
ویژگی background-color رنگ پس زمینه یک المان را مشخص می کند. رنگ می تواند نام معتبر، HEX یا RGB باشد.
<style>
body {
background-color: lightblue;
}
</style>
روی المان های مختلف
برای هر تگ HTML می توان رنگ پس زمینه گذاشت؛ مثلاً برای h1، p و div.
<style>
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
</style>
Opacity؛ شفافیت کل المان
ویژگی «opacity» شفافیت کل المان را تنظیم می کند. بازه از 0 تا 1 است. مقدار کمتر، شفاف تر است. متنِ داخل هم همراهش شفاف می شود.
<style>
div {
background-color: green;
opacity: 0.3;
}
</style>
هشدار: با opacity متن و فرزندان هم کمرنگ می شوند. خوانایی ممکن است سخت شود.
RGBA؛ شفافیت فقط پس زمینه
اگر نمی خواهی متن شفاف شود، از رنگ های RGBA استفاده کن. «الفا (Alpha)» بین 0 تا 1 است و فقط پس زمینه را شفاف می کند.
<style>
div {
background: rgba(0, 128, 0, 0.3);
}
</style>
گام های عملی سریع
- یک المان نمونه بساز.
- با
background-colorرنگ بده. - اثر opacity را امتحان کن.
- سپس RGBA را تست کن.
نکته: برای ادامه مباحث، صفحه پس زمینه تصویر را ببین. همچنین رنگ ها را در رنگ های HSL مرور کن. برای تمرکز روی «پس زمینه»، به راهنمای پس زمینه برگرد.
جمع بندی سریع
- background-color رنگ پشت المان را می سازد.
- opacity کل المان را شفاف می کند.
- RGBA فقط پس زمینه را شفاف می کند.
- نام رنگ، HEX و RGB همه معتبرند.
- برای تصویر، به «background-image» برو.