كيفية إنشاء: نص شفاف

كيفية إنشاء نص شفاف

الخطوة الأولى - إضافة HTML:

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

الخطوة الثانية - إضافة CSS:

يمكنك استخدام خاصية mix-blend-mode لضمان إضافة نص شفاف إلى الصورة. ولكن Internet Explorer أو 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;
  ....
}

جرب بنفسك