یکی از کاربردهای رایج 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 به اندازه ۱۱۰۰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 { height: 50vh; background: coral; color: #fff; }
در این بخش نیز استایلدهی به 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 و یا 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 با 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 هم به برنامه اضافه کنیم تا متنی که داریم در صفحههای کوچکتر بزرگتر شود. برای این کار 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; } }
مشاهده نتیجه نهایی در این لینک امکانپذیر میباشد.