آموزش تغییر پس زمینه عناصر با css
در سی اس اس در مورد کار با background یا پس زمینه چند ویژگی داریم که شامل موارد زیر هست:
- background-color - رنگی
- background-image - تصویری
- background-repeat - تکرار تصویر
- background-attachment
- background-position
background-color
خصوصیت background-color رنگ پس زمینه یک عنصر را مشخص می کند.
background-image
با استفاده از خصوصیت background-image میتوان یک عکس را به عنوان پس زمینه برای یک عنصر مشخص کرد.
همچنین برای دادن gradiant (گرادیانت) به عنصر از این خصوصیت استفاده میکنیم . برای این کار در قسمت value باید از کلمه کلیدی ، linear-gradiant (گرادیانت خطی) یا radial gradients (گرادیانت شعاعی) استفاده کرد.
gradient (گرادیانت) چیست؟
گرادیانت یعنی نمایش تغییر رنگ ، بین یک یا چند رنگ که یک طیف رنگی بین رنگ های اصلی به وجود می آید.
مثال linear-gradiant (گرادیانت خطی) :
background: linear-gradient(#e66465, #9198e5);
مثال radial gradients (گرادیانت شعاعی) :
background: radial-gradient(#e66465, #9198e5);
background-repeat
زمانی که عکس از container (عنصر نگهدارنده) به میزان قابل توجهی کوچک تر باشد ، به صورت پیش فرض عکس تکرار میشود تا container را پر کند.
background-attachment
ویژگی background-attachment ، نحوه رفتار تصویر پس زمینه نسبت به اسکرول صفحه را مشخص میکند.
background-attachment دارای سه مقدار از پیش تعریف شده برای مقدار دهی میباشد. که شامل :
scroll , fix , local
بیشتر بدانیم : بارگذاری تنبل (lazy load - لیزی لود) چیست؟
background-position
ویژگی background-position ، موقعیت پس زمینه را با توجه به عنصری که به ان ویژگی داده شده است, تعیین میکند.
مثال:
.container{
background-image: linear-gradient(to bottom left, #6474C0, #59E260);
background-size: 50px 50px;
background-repeat: no-repeat;
/* background-size: cover; */
background-position:center center;
width: 300px;
height: 300px;
border: 2px solid;
color: pink;
}
تشریح مثال :
در اینجا ما به یک عنصر div ویژگی background دادیم. که از این ویژگی ها ، ویژگی background -image است که با استفاده از مقدار گرادیانت ، یک پس زمینه در عنصر div ایجاد کرده ایم.ویژگی بعدی ، ویژگی background-size است که سایز پس زمینه را به 50px در 50px تبدیل کرده ایم.در ویژگی background-position ،موقعیت پس زمینه را نسبت به عنصر div مشخص کرده ایم.
بیشتر بدانیم : معرفی بهترین فریمورک های UI (کتابخانه های css)
