CSS — پس زمینه (Backgrounds)

آخرین بروزرسانی: 1404/07/12

قبلی: رنگ ها - HSL و HSLA بعدی: پس زمینه - تصویر (Backgrounds Image)

پس زمینه CSS

در این مطلب، «پس زمینه CSS» را مرور می کنیم. با خواص background-color، background-image، background-repeat، background-attachment، background-position و خلاصه نویسی background آشنا می شوید.

خواص پس زمینه CSS

خواص پس زمینه برای افزودن افکت های زمینه به عناصر به کار می روند. در فصل های مرتبط، هر کدام به صورت جداگانه بررسی می شوند.

background-color
background-image
background-repeat
background-attachment
background-position
background (خلاصه نویسی)

background-color در CSS

ویژگی background-color رنگ پس زمینه یک عنصر را تعیین می کند. رنگ می تواند نامی، HEX یا RGB باشد.

body {  background-color: lightblue;}

برای بررسی انواع رنگ ها، به فصل رنگ ها مراجعه کنید. همچنین می توانید از رنگ های HSL در پروژه های خود استفاده کنید.

اعمال پس زمینه به عناصر مختلف

می توانید رنگ پس زمینه را برای هر عنصر HTML تعیین کنید. در نمونه زیر برای h1، p و div مقادیر متفاوت قرار گرفته است.

h1 {  background-color: green;} 

div {  background-color: lightblue;} 

p {  background-color: yellow;}

Opacity / Transparency

ویژگی opacity شفافیت عنصر را از 0 تا 1 تعیین می کند؛ هرچه مقدار کمتر باشد، عنصر شفاف تر است.

div {  background-color: green;  opacity: 0.3;}

نکته: هنگام استفاده از opacity، شفافیت به فرزندان نیز اعمال می شود و ممکن است خوانایی متن کاهش یابد.

شفافیت پس زمینه با RGBA

اگر نمی خواهید متنِ داخل عنصر شفاف شود، از مقدار رنگی RGBA استفاده کنید تا فقط پس زمینه شفاف بماند.

div {  background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */}

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