آموزش تنظیم background (پس زمینه) در CSS (سی اس اس)

آموزش تنظیم background (پس زمینه) در سی اس اس با تصویر، رنگ، رنگ گرادیانت

زمان مطالعه: 3 دقیقه

بازدید: 1456

پرسش و پاسخ: 0

فهرست مطالب برای مطالعه

- آموزش تغییر پس زمینه عناصر با css

آموزش تغییر پس زمینه عناصر با 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 مشخص کرده ایم.