कैसे करें - कटआउट टेक्स्ट
CSS के साथ रिस्पॉन्सिव कटआउट/नॉकआउट टेक्स्ट बनाने का तरीका जानें।
एक कटआउट टेक्स्ट (या नॉकआउट टेक्स्ट) एक व्यू-थ्रू टेक्स्ट है जो पृष्ठभूमि छवि के शीर्ष पर कट आउट दिखाई देता है:
प्रकृति
नोट: यह उदाहरण इंटरनेट एक्सप्लोरर या एज में काम नहीं करता है।
कटआउट टेक्स्ट कैसे बनाएं
चरण 1) HTML जोड़ें:
उदाहरण
<div class="image-container">
<div class="text">NATURE</div>
</div>
चरण 2) सीएसएस जोड़ें:
mix-blend-mode
संपत्ति छवि में कटआउट टेक्स्ट जोड़ना संभव बनाती है । हालाँकि, यह IE या Edge में समर्थित नहीं है:
उदाहरण
.image-container {
background-image: url("img_nature.jpg");
/* The image used - important! */
background-size: cover;
position: relative; /* Needed to position
the cutout text in the middle of the image */
height: 300px; /* Some
height */
}
.text {
background-color: white;
color: black;
font-size: 10vw;
/* Responsive font size */
font-weight: bold;
margin: 0 auto; /* Center the text container */
padding: 10px;
width: 50%;
text-align: center; /* Center text */
position: absolute; /* Position text */
top: 50%; /* Position text in the middle */
left: 50%; /* Position
text in the middle */
transform: translate(-50%, -50%); /* Position text in the middle */
mix-blend-mode: screen;
/* This makes the cutout text possible */
}
यदि आप एक काला कंटेनर टेक्स्ट चाहते हैं, तो मिक्स-ब्लेंड-मोड को "गुणा" और पृष्ठभूमि-रंग को काला, और रंग को सफेद में बदलें:
उदाहरण
.text {
background-color: black;
color: white;
mix-blend-mode:
multiply;
....
}