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

background در CSS

زمان مطالعه

4 دقیقه

تعداد بازدید

49

تعداد پرسش ها

0

افزودن به لیست علاقه مندی ها


برچسب ها :


اشتراک گذاری این مطلب
در مورد نویسنده : "من همیشه می توانم آزادانه انتخاب کنم، اما باید بدانم که اگر انتخاب نکنم، باز هم انتخابی کرده ام."

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

background در CSS

زمان مطالعه

4 دقیقه

تعداد بازدید

49

تعداد پرسش ها

0

افزودن به لیست علاقه مندی ها


برچسب ها :


اشتراک گذاری این مطلب

در سی اس اس در مورد کار با 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

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 مشخص کرده ایم.

در مورد نویسنده : "من همیشه می توانم آزادانه انتخاب کنم، اما باید بدانم که اگر انتخاب نکنم، باز هم انتخابی کرده ام."


پرسش و پاسخ
0
دوره پیشنهادی
دوره پیشنهادی