CSS से रिस्पॉन्सिव कटआउट/नॉकआउट टेक्स्ट कैसे बनाएं?

नॉकआउट टेक्स्ट में टेक्स्ट पारदर्शी होता है और बैकग्राउंड इमेज टेक्स्ट के आकार में दिखती है। mix-blend-mode: multiply और काला बैकग्राउंड/सफेद टेक्स्ट से प्रभाव प्राप्त होता है। रिस्पॉन्सिव के लिए font-size: 10vw।

उदाहरण

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
    .image-container {
      background-image: url("https://images.pexels.com/photos/957024/forest-trees-perspective-bright-957024.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
      background-size: cover; position: relative; height: 300px;
    }
    .text {
      background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);
      font-size: 10vw; font-weight: bold; margin: 0 auto; padding: 10px;
      width: 50%; text-align: center; position: absolute;
      top: 50%; left: 50%; transform: translate(-50%, -50%);
      mix-blend-mode: multiply;
    }
  </style>
</head>
<body>
  <h1 style="text-align: center;">Responsive Cutout Text Example</h1>
  <div class="image-container">
    <div class="text">FOREST</div>
  </div>
</body>
</html>

आउटपुट

उपरोक्त कोड निम्नलिखित आउटपुट उत्पन्न करेगा:

मुख्य बिंदु

• mix-blend-mode: multiply - काला बैकग्राउंड पारदर्शी, सफेद टेक्स्ट अपारदर्शी
• काला बैकग्राउंड + सफेद टेक्स्ट - multiply मोड के लिए आवश्यक
• font-size: 10vw - व्यूपोर्ट चौड़ाई के सापेक्ष रिस्पॉन्सिव
• केंद्रित - top/left 50% + transform translate(-50%,-50%)
• बैकग्राउंड-साइज: कवर - इमेज कंटेनर भरे
• ब्राउज़र सपोर्ट - मॉडर्न ब्राउज़र में काम करता है