خانه / بلاگ / آرشیو بلاگ ماه می / تنظیمات ترکیبی background

تنظیمات ترکیبی background

تنظیمات ترکیبی background در CSS

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

توجه: برای یادگیری مفاهیم پایه‌ای background، می‌توانید به آموزش وارد شوید مراجعه کنید.

ترکیب چند تصویر در پس‌زمینه

با استفاده از ویژگی background-image می‌توانید چندین تصویر را با کاما از هم جدا کنید:

div {
  background-image: url('image1.png'), url('image2.jpg');
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

ویژگی توضیحات
background-size تعیین اندازه برای هر لایه تصویر
background-blend-mode تعیین نحوه ترکیب لایه‌ها

ترکیب گرادیان و تصویر

می‌توانید از گرادیان‌های CSS همراه با تصاویر استفاده کنید:

  • گرادیان خطی (linear-gradient)
  • گرادیان شعاعی (radial-gradient)
  • گرادیان مکرر (repeating-gradient)
مثال: 
header {
  background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7)),
    url('hero-image.jpg') center/cover;
}

بهینه‌سازی performance

هنگام استفاده از چندین background، به این نکات توجه کنید:

  1. از تصاویر بهینه‌شده استفاده کنید
  2. لایه‌های سنگین را در اولویت قرار ندهید
  3. از گرادیان‌های CSS به جای تصاویر استفاده کنید

برای مثال‌های پیشرفته‌تر و تکنیک‌های ترکیب background، مجدداً توصیه می‌کنیم به آموزش وارد شوید مراجعه نمایید.