หลากทางสร้าง: ข้อความโคลน

หลากทางสร้างข้อความโคลน

ขั้นที่ 1 - เพิ่ม HTML:

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

ขั้นที่ 2 - เพิ่ม 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: คูณประสาน;
  ....
{}

亲自试一试