یکی از کاربردهای رایج 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 به اندازه

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

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

با این کار محتوا به صورت عمودی و افقی در مرکز متمرکز می‌شود. همینطور می‌خواهیم direction به صورت column باشد تا محتوا روی هم قرار بگیرد. مهم است که

استایل‌های 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

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

می‌توانیم با استفاده از before در CSS یک overlay اضافه کنیم. ما position را در حالت

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

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

این کار یک overlay سیاه با شفافیت ۵۰٪ ایجاد می‌کند. از تابع

در حال حاضر، خواندن متن همچنان سخت است. زیرا، overlay روی آن قرار دارد. می‌توانیم این مشکل را با تنظیم 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;
  }
}

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