شنبه ۲۹ دي ۱۴۰۳
Tut24 آموزش برنامه نویسی و مجله تخصصی فناوری ورود/عضویت

آموزش CSS - پس زمینه

پس‌زمینه‌ها(background) بخشی ضروری از CSS هستند و می‌توانند به بهبود ظاهر بصری یک صفحه وب کمک کنند. ازbackground

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

در اینجا چند روش اساسی برای کار با پس زمینه در CSS وجود دارد:

  • تنظیم رنگ پس زمینه(background color) :

برای تنظیم یک رنگ ثابت به عنوان پس زمینه یک عنصر، از ویژگی background-color استفاده کنید.

مثال زیر برای تنظیم رنگ پس‌زمینه، عنصر body به سیاه، میباشد:

body {
  background-color: black;
}
  •  تنظیم تصویر پس زمینه(background-image):

background-image یک ویژگی CSS است که یک یا چند تصویر پس‌زمینه را برای یک عنصر تنظیم می‌کند. تصاویر را می‌توان به‌عنوان URLهایی که به  ادرس فایل‌های تصویر اشاره می‌کنند تعریف کرد و یا با استفاده از توابع ()linear-gradient یا radial-gradient () حالت  گرادیان به پس زمینه مورد نظراعمال کرد .

در اینجا نمونه ای از نحوه استفاده از تصویر پس زمینه برای تنظیم یک تصویر پس زمینه single آورده شده است:

.element {
  background-image: url('path/to/image.jpg');
}

همچنین می‌توانید چندین تصویر پس‌زمینه را برای یک عنصر با جدا کردن URL‌ها با کاما مشخص کنید:

.element {
  background-image: url('path/to/image1.jpg'), url('path/to/image2.jpg');
}

در مثال بالا دو تصویر پس‌زمینه مشخص شده‌اند که این دوتصویر روی هم قرار می‌گیرند

-برای ایجاد گرادینت ها به عنوان تصاویر پس زمینه، می توانید از توابع ()linear-gradient یا radial-gradient() استفاده کنید. در اینجا مثالی از گرادیان خطی آورده شده است:

.element {
  background-image: linear-gradient(to bottom, red, yellow);
}

در این مثال، یک گرادیان خطی ایجاد می شود که از قرمز در بالا به زرد در پایین می رسد. پارامتر رو به پایین جهت گرادیان را مشخص می کند و می تواند با به بالا، به چپ، به راست یا هر زاویه بر حسب درجه جایگزین شود.

  • تنظیم موقعیت پس زمینه(background-position):

background-position یک ویژگی CSS است که موقعیت یک تصویر پس‌زمینه را در عنصر آن مشخص می‌کند. مثلا تعیین می کند که گوشه سمت چپ بالای تصویر پس زمینه نسبت به گوشه سمت چپ بالای عنصری که روی آن اعمال می شود، در کدام موقعیت قرار بگیرد.

ویژگی background-position را می توان با استفاده ، درصدها یا مقادیر اندازه گیری مشخص کرد. در اینجا چند نمونه آورده شده است:

.element {
  background-image: url('path/to/image.jpg');
  background-position: center; /* تصویر را در مرکز عنصر قرار می دهد */
}

.element {
  background-image: url('path/to/image.jpg');
  background-position: 50% 50%; /* تصویر را در مرکز عنصر قرار می دهد */
}

.element {
  background-image: url('path/to/image.jpg');
  background-position: top left; /* تصویر را در گوشه سمت چپ بالای عنصر قرار می دهد */
}

.element {
  background-image: url('path/to/image.jpg');
  background-position: 10px 20px; /* تصویر را 10 پیکسل از سمت چپ و 20 پیکسل از بالای عنصر قرار می دهد */
}

در این مثال ها ی بالا،ویژگی background-image تصویری را تنظیم می کند که به عنوان پس زمینه عنصر استفاده می شود، در حالی که ویژگی background-position تعیین می کند که تصویر در کجا قرار گیرد.

توجه داشته باشید که موقعیت پس‌زمینه  را می‌توان با چندین تصویر پس‌زمینه نیز استفاده کرد تا موقعیت هر تصویر را جداگانه مشخص کنید. برای انجام این کار، می توانید مقادیر را با کاما از هم جدا کنید:

.element {
  background-image: url('path/to/image1.jpg'), url('path/to/image2.jpg');
  background-position: 50% 50%, top left; /* تصویر اول را در مرکز و تصویر دوم را در گوشه سمت چپ بالای عنصر قرار می دهد*/
}

در مثال بالا ،مقدار اول برای تصویر پس زمینه اول و مقدار دوم برای تصویر پس زمینه دوم اعمال می شود.

  • پس زمینه-تکرار(background-repeat ):

Background-repeat یک ویژگی CSS است که کنترل می‌کند اگر تصویر پس‌زمینه کوچک‌تر از عنصری باشد که روی آن اعمال می‌شود، ایا تصویر پس‌زمینه در هر دو جهت افقی و عمودی تکرار شود یا نیازی به تکرار تصویر ندارد

ویژگی Background-repeat چهار مقدار را می پذیرد:

  1. repeat - این مقدار پیش فرض است. تصویر پس زمینه هم به صورت افقی و هم به صورت عمودی تکرار می شود تا کل عنصر را پر کند.
  2. repeat-x - تصویر پس زمینه فقط به صورت افقی تکرار می شود، به این معنی که عرض عنصر را پر می کند اما به صورت عمودی تکرار نمی شود.
  3. repeat-y - تصویر پس زمینه فقط به صورت عمودی تکرار می شود، به این معنی که ارتفاع عنصر را پر می کند اما به صورت افقی تکرار نمی شود.
  4. no-repeat - تصویر پس زمینه فقط یک بار نمایش داده می شود و در هیچ جهتی تکرار نخواهد شد.

در اینجا مثالی از نحوه استفاده از Background-repeat آورده شده است:

.element {
  background-image: url('path/to/image.jpg');
  background-repeat: no-repeat;
}

درمثال بالا، تصویر پس‌زمینه فقط یک بار نمایش داده می‌شود و در هیچ جهتی تکرار نخواهد شد.

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

  • پس زمینه-پیوست(background-attachment)

background-attachment یک ویژگی CSS است که کنترل می‌کند که آیا تصویر پس‌زمینه باید در محل خود حرکت کند یا ثابت بماند، نسبت به viewport یا عنصری که روی آن اعمال می‌شود.

سه مقدار وجود دارد که می توان با پس زمینه پیوست استفاده کرد:

  1. اسکرول: این مقدار پیش فرض است. تصویر پس زمینه همراه با محتوای عنصر اسکرول می شود.
  2. ثابت: تصویر پس‌زمینه، نسبت به صفحه نمایش، در جای خود ثابت می‌ماند. این بدان معناست که وقتی کاربر صفحه را به پایین اسکرول می کند، تصویر پس زمینه در همان موقعیت باقی می ماند.
  3. local: تصویر پس زمینه به جای محتوای درون عنصر، همراه با خود عنصر حرکت می کند. این به ویژه برای عناصر با ارتفاع ثابت مفید است، جایی که می‌خواهید تصویر پس‌زمینه با عنصر حرکت کند اما با رسیدن به نقطه انتهایی قطع نشود.

در اینجا مثالی از نحوه استفاده از پیوست پس زمینه آورده شده است:

.element {
  background-image: url('path/to/image.jpg');
  background-attachment: fixed;
}

در  مثال بالا،هنگامی که کاربر صفحه را به پایین اسکرول می‌کند، تصویر پس‌زمینه نسبت به viewport در جای خود ثابت می‌ماند. اگر می‌خواهید تصویر پس‌زمینه با محتوای عنصر اسکرول شود، باید ویژگی پس‌زمینه پیوست را روی اسکرول تنظیم کنید.

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