Bagaimana membuat: teks yang di potong

Belajar cara menggunakan CSS untuk membuat teks yang di potong responsif (juga disebut teks yang di potong atau teks yang di potong).

Teks yang di potong adalah teks yang transparan, terlihat seperti di potong di atas gambar latar:

WUHAN

Try It Yourself

Perhatian:Contoh ini tidak cocok untuk Internet Explorer atau Edge.

Bagaimana membuat teks yang di potong

Tahap pertama - Tambahkan HTML:

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

Tahap kedua - Tambahkan CSS:

Dengan atribut mix-blend-mode dapat menambahkan teks yang di potong ke gambar. Tetapi IE atau Edge tidak mendukung:

.image-container {
  background-image: url("img_nature.jpg"); /* Gambar yang digunakan - penting! */
  background-size: cover;
  position: relative; /* Butuh letak potongan teks di tengah gambar */
  height: 300px; /* Tinggi tetap */
{}
.text {
  background-color: putih;
  color: hitam;
  font-size: 10vw; /* Ukuran font responsif */
  font-weight: bold;
  margin: 0 auto; /* Rata kanan kanan kontainer teks */
  padding: 10px;
  width: 50%;
  text-align: center; /* Rata teks */
  position: absolute; /* Letakkan teks */
  top: 50%; /* Letakkan teks di tengah */
  left: 50%; /* Letakkan teks di tengah */
  transform: translate(-50%, -50%); /* Letakkan teks di tengah */
  mix-blend-mode: screen; /* Ini memungkinkan potongan teks */
{}

Try It Yourself

Jika Anda ingin teks kontainer hitam, ubah mix-blend-mode ubah gandaubah warna latar menjadi hitam, dan warna menjadi putih:

contoh

.text {
  background-color: hitam;
  warna: putih;
  mix-blend-mode: multiply;
  ....
{}

Try It Yourself