ఎలా సృష్టించాలి: కాప్ టెక్స్ట్

కాప్ టెక్స్ట్ ను ఎలా సృష్టించాలి

మొదటి చర్య - HTML జోడించండి:

<div class="image-container">
  <div class="text">NATURE</div>
</div>

రెండవ చర్య - CSS జోడించండి:

మిక్స్ బ్లెండ్ మోడ్ అట్రిబ్యూట్ ను ఉపయోగించి చాప్ టెక్స్ట్ ను చిత్రంలో జోడించవచ్చు. కానీ IE లేదా Edge ఇది మద్దతు చేయవు:

.image-container {
  background-image: url("img_nature.jpg"); /* ఉపయోగించిన చిత్రం - చాలా ముఖ్యం! */
  background-size: cover;
  position: relative; /* కట్ టెక్స్ట్ ను చిత్రం మధ్యలో నిల్వ చేస్తుంది */
  height: 300px; /* కొంచెం ఎత్తు */
}
.text {
  background-color: white;
  color: black;
  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: screen; /* ఇది టెక్స్ట్ కు కట్ పాస్ పోస్బిల్ చేస్తుంది */
}

亲自试一试

నలుపు కంటైనర్ టెక్స్ట్ కు కావాలంటే, మిక్స్ బ్లెండ్ మోడ్ ను చేర్చండి: మిక్స్ బ్లెండ్ మోడ్ మార్చండి మల్టిప్లయ్బ్యాక్‌గ్రౌండ్ కలర్ ను నలుపు చేయండి, కలర్ ను తెలుపు చేయండి:

ఇన్స్టాన్స్

.text {
  background-color: black;
  color: white;
  mix-blend-mode: multiply;
  ....
}

亲自试一试