یکی از کاربردهای رایج pseudo-elementهای before و after در CSS، ایجاد یک overlay بر روی تصویر است. این یک الگوی رایج برای بخش‌های hero یا گالری تصاویر به حساب می‌آید. زمانی که ما از یک تصویر به عنوان بک‌گراند استفاده می‌کنیم مشکلی که وجود دارد این است که خواندن متنی که روی تصویر قرار دارد، دشوار می‌باشد. با اضافه کردن یک overlay می‌توانیم متن را خواناتر کرده و این مشکل را برطرف نماییم.

به عنوان مثال، از قطعه کد HTML زیر می‌توانیم برای بخش hero پروژه خود استفاده کنیم:

<section class="hero">
  <div class="container">
    <h1>The Landscape of Your Dream Awaits</h1>
    <p>
      Embark on a journey to explore new horizons, uncover hidden treasures, and
      embrace the beauty of the unknown
    </p>
    <div class="btn">Learn More</div>
  </div>
</section>

برای شروع نوشتن CSS، ابتدا تنظیمات را ریست کرده و فونت را به پروژه اضافه می‌کنیم:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
}

استایل‌های Container

ما می‌خواهیم محتوا خود را در یک container به اندازه ۱۱۰۰px قرار دهیم. همچنین قصد داریم محتوایی که داریم به صورت عمودی و افقی در مرکز container قرار داشته باشد. این کار را می‌توانیم با استفاده از Flexbox انجام دهیم.

CSS زیر را به پروژه اضافه می‌کنیم:

.container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

با این کار محتوا به صورت عمودی و افقی در مرکز متمرکز می‌شود. همینطور می‌خواهیم direction به صورت column باشد تا محتوا روی هم قرار بگیرد. مهم است که height: 100%; را به container اضافه کنیم تا ارتفاع به طور کامل بخش hero را بگیرد.

استایل‌های Hero

ارتفاع hero را روی نیمی از صفحه تنظیم می‌کنیم و فعلاً یک رنگ پس‌زمینه به آن اضافه می‌نماییم:

.hero {
  height: 50vh;
  background: coral;
  color: #fff;
}

استایل‌های Text

در این بخش نیز استایل‌دهی به Textها را انجام می‌دهیم:

.hero h1 {
  font-size: 3rem;
  color: white;
  text-align: center;
  padding: 1rem;
}

.hero p {
  font-size: 1.5rem;
  color: white;
  text-align: center;
  padding: 1rem;
  margin-bottom: 2.5rem;
}

استایل‌های Button

در نهایت استایل‌های button و یا link را بررسی می‌کنیم:

.hero .btn {
  font-size: 1.5rem;
  color: white;
  text-align: center;
  padding: 1rem;
  background: #333;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.hero .btn:hover {
  background: #555;
}

تصویر پس‌زمینه

در این مرحله بررسی می‌کنیم اگر یک تصویر پس‌زمینه اضافه نماییم، چه شکلی به نظر می‌رسد.

.hero {
  height: 50vh;
  background: url('./background.jpg') center/cover no-repeat;
  color: #fff;
}

اکنون تصویر نمایان می‌شود. با این حال، خواندن متنی که روی آن قرار دارد سخت است.

Overlay

overlay با position "absolute" در بخش hero قرار می‌گیرد. بنابراین بخش hero را relative می‌کنیم:

.hero {
  height: 50vh;
  background: url('./background.jpg') center/cover no-repeat;
  color: #fff;
  position: relative;
}

می‌توانیم با استفاده از before در CSS یک overlay اضافه کنیم. ما position را در حالت absolute قرار داده و به آن رنگ background اضافه می‌کنیم. سپس Opacity را نیز روی ۰٫۵ قرار می‌دهیم تا تصویر همچنان قابل مشاهده باشد.

برای انجام این کار CSS زیر را به پروژه خود اضافه می‌کنیم:

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

این کار یک overlay سیاه با شفافیت ۵۰٪ ایجاد می‌کند. از تابع rgba برای تنظیم رنگ و opacity استفاده می‌کنیم. سه مقدار اول مقادیر RGB و آخرین مقدار مربوط به Opacity می‌باشد.

در حال حاضر، خواندن متن همچنان سخت است. زیرا، overlay روی آن قرار دارد. می‌توانیم این مشکل را با تنظیم z-index کلاس .container بر روی مقدار ۱ برطرف نماییم. همچنین باید position را روی مقدار relative تنظیم کنیم تا z-index به درستی کار کند.

.container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

اکنون متن قابل خواندن می‌باشد. همچنین می‌توانیم با تغییر مقادیر rgba رنگ و شفافیت overlay را تغییر دهیم. یا این که می‌توانیم با تغییر آخرین مقدار، Opacity را تغییر دهیم.

Media Query

ممکن است بخواهیم یک media query هم به برنامه اضافه کنیم تا متنی که داریم در صفحه‌های کوچک‌تر بزرگ‌تر شود. برای این کار CSS زیر را به پروژه اضافه می‌کنیم:

@media screen and (max-width: 768px) {
  .hero h1 {
    font-size: 2.5rem;
  }

  .hero p {
    font-size: 1.25rem;
  }

  .hero .btn {
    font-size: 1.25rem;
  }
}

مشاهده نتیجه نهایی در این لینک امکان‌پذیر می‌باشد.