چگونه ایجاد کنیم: نوشته‌های شفاف

چگونه نوشته‌های شفاف ایجاد کنیم

مرحله اول - اضافه کردن HTML:

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

مرحله دوم - اضافه کردن CSS:

با استفاده از ویژگی 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;
  ....
}

آموزش خود را امتحان کنید