วิธีการ - ข้อความคัตเอาท์
เรียนรู้วิธีสร้างข้อความคัตเอาท์/ข้อความน็อกเอาต์ที่ตอบสนองด้วย CSS
ข้อความคัตเอาท์ (หรือข้อความที่น่าพิศวง) เป็นข้อความซีทรูที่ปรากฏที่ถูกตัดออกที่ด้านบนของรูปภาพพื้นหลัง:
ธรรมชาติ
หมายเหตุ:ตัวอย่างนี้ใช้ไม่ได้ใน Internet Explorer หรือ Edge
วิธีการสร้างข้อความคัตเอาท์
ขั้นตอนที่ 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");
/* The image used - important! */
background-size: cover;
position: relative; /* Needed to position
the cutout text in the middle of the image */
height: 300px; /* Some
height */
}
.text {
background-color: white;
color: black;
font-size: 10vw;
/* Responsive font size */
font-weight: bold;
margin: 0 auto; /* Center the text container */
padding: 10px;
width: 50%;
text-align: center; /* Center text */
position: absolute; /* Position text */
top: 50%; /* Position text in the middle */
left: 50%; /* Position
text in the middle */
transform: translate(-50%, -50%); /* Position text in the middle */
mix-blend-mode: screen;
/* This makes the cutout text possible */
}
หากคุณต้องการข้อความคอนเทนเนอร์สีดำ ให้เปลี่ยนโหมด mix-blend เป็น "multiply" และ background-color เป็นสีดำ และสีเป็นสีขาว:
ตัวอย่าง
.text {
background-color: black;
color: white;
mix-blend-mode:
multiply;
....
}