ਕਿਵੇਂ ਬਣਾਓ: ਪਾਰਦਰਸ਼ੀ ਟੈਕਸਟ

ਕਿਵੇਂ ਪਾਰਦਰਸ਼ੀ ਟੈਕਸਟ ਬਣਾਓ

ਪਹਿਲਾ ਕਦਮ - ਐੱਚਟੀਐੱਮਐੱਲ ਜੋੜੋ:

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

ਦੂਜਾ ਕਦਮ - ਸਕਸ਼ਮ ਸਕ੍ਰੀਨ ਜੋੜੋ:

mix-blend-mode ਸ਼੍ਰੇਣੀ ਦੀ ਵਰਤੋਂ ਨਾਲ ਪਾਰਦਰਸ਼ੀ ਟੈਕਸਟ ਜੋੜ ਸਕਦੇ ਹੋ, ਪਰ 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; /* ਇਹ ਟੈਕਸਟ ਕੇਂਦਰ ਕਰਨ ਦੀ ਸੰਭਾਵਨਾ ਦਿੰਦਾ ਹੈ */
}

亲自试一试

ਅਗਰ ਤੁਸੀਂ ਕਾਲੇ ਕੰਟੇਨਰ ਟੈਕਸਟ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ mix-blend-mode ਬਦਲੋ multiply، ਪ੃਷ਠ ਰੰਗ ਨੂੰ ਕਾਲਾ ਬਣਾਓ ਅਤੇ ਰੰਗ ਨੂੰ ਸਫੇਦ ਬਣਾਓ:

ਇੱਕ ਉਦਾਹਰਣ

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

亲自试一试