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

亲自试一试

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

Bagaimana membuat teks yang di potong

Langkah pertama - Tambahkan HTML:

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

Langkah kedua - Tambahkan CSS:

Dengan atribut mix-blend-mode, anda 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 letakkan 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; /* Tengahkan kontainer teks */
  padding: 10px;
  width: 50%;
  text-align: center; /* Tengahkan 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 */
{}

亲自试一试

Jika anda mahu teks kontainer hitam, ubah mix-blend-mode ubah gandakan，ubah warna latar menjadi hitam, dan warna menjadi putih：

Contoh

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

亲自试一试