Html and Css & Jsآموزش

🎨 تکنیک‌های ایجاد پس‌زمینه فید شده (Faded Background) در CSS پس‌زمینه فید شده یک تکنیک طراحی وب است که با ایجاد یک لایه شفاف روی تصویر پس‌زمینه، خوانایی متن و عناصر روی آن را بهبود می‌دهد. این تکنیک به‌ویژه برای تصاویر با پس‌زمینه روشن یا پیچیده بسیار مفید است. 🛠️ روش‌های مختلف ایجاد پس‌زمینه فید شده ۱. استفاده از Linear Gradient با Opacity

.section {
  background:
    linear-gradient(
      to right,
      rgb(0 0 0 / 0.5),  /* سیاه با ۵۰٪ شفافیت */
      rgb(0 0 0 / 0)     /* کاملاً شفاف */
    ),
    url(background.png); /* تصویر پس‌زمینه */
}

نکات کلیدی: از تابع rgb() با پارامتر alpha برای کنترل شفافیت استفاده می‌شود rgb(0 0 0 / 0.5) یعنی سیاه با ۵۰٪ شفافیت rgb(0 0 0 / 0) یعنی کاملاً شفاف می‌توانید رنگ‌های مختلف را با درصد شفافیت متفاوت استفاده کنید ۲. استفاده از RGBA

.section {
  background:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0)
    ),
    url(background.png);
}

نکات کلیدی: rgba(r, g, b, alpha) همان rgb(r g b / alpha) است alpha از ۰ تا ۱ است ۰ = کاملاً شفاف ۱ = کاملاً غیرشفاف ۳. استفاده از رنگ‌های دیگر

.section {
  background:
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0.7),  /* سفید با ۷۰٪ شفافیت */
      rgba(255, 255, 255, 0)
    ),
    url(background.png);
}

۴. استفاده از رنگ‌های متعدد

.section {
  background:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.8),
      rgba(0, 0, 0, 0.4),
      rgba(0, 0, 0, 0)
    ),
    url(background.png);
}

۵. استفاده از رنگ‌های متعدد با رنگ‌های مختلف

.section {
  background:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.8),
      rgba(255, 255, 255, 0.4),
      rgba(0, 0, 0, 0)
    ),
    url(background.png);
}

نکات کلیدی: می‌توانید رنگ‌های مختلف را با درصد شفافیت متفاوت استفاده کنید این روش برای ایجاد افکت‌های پیچیده‌تر استفاده می‌شود 📝 مثال‌های عملی مثال ۱: پس‌زمینه فید شده برای متن سفید

.hero {
  background:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.6),
      rgba(0, 0, 0, 0)
    ),
    url(hero-bg.jpg);
  color: white;
  padding: 60px 20px;
  text-align: center;
}

مثال ۲: پس‌زمینه فید شده برای متن سیاه

.hero {
  background:
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0.7),
      rgba(255, 255, 255, 0)
    ),
    url(hero-bg.jpg);
  color: black;
  padding: 60px 20px;
  text-align: center;
}

مثال ۳: پس‌زمینه فید شده برای متن رنگی

.hero {
  background:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0)
    ),
    url(hero-bg.jpg);
  color: #ff6b6b;
  padding: 60px 20px;
  text-align: center;
}

🎨 افکت‌های پیشرفته افکت ۱: پس‌زمینه فید شده با دو رنگ

.hero {
  background:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.8),
      rgba(0, 0, 0, 0.4),
      rgba(0, 0, 0, 0)

),
    url(hero-bg.jpg);
  color: white;
  padding: 60px 20px;
  text-align: center;
}

افکت ۲: پس‌زمینه فید شده با رنگ‌های مختلف

.hero {
  background:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.8),
      rgba(255, 255, 255, 0.4),
      rgba(0, 0, 0, 0)
    ),
    url(hero-bg.jpg);
  color: white;
  padding: 60px 20px;
  text-align: center;
}

افکت ۳: پس‌زمینه فید شده با رنگ‌های متعدد

.hero {
  background:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.8),
      rgba(255, 255, 255, 0.4),
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0)
    ),
    url(hero-bg.jpg);
  color: white;
  padding: 60px 20px;
  text-align: center;
}