ในการสร้างข้อความ Knockout แบบ Responsive ด้วย CSS โค้ดมีดังนี้ −
ตัวอย่าง
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;} .image-container { background-image: url("https://images.pexels.com/photos/957024/forest-trees-perspective-bright-957024.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"); background-size: cover; position: relative; height: 300px; } .text { background-color: rgb(0, 0, 0); color: rgb(255, 255, 255); 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: multiply; } </style> </head> <body> <h1 style="text-align: center;">Responsive Cutout Text Example</h1> <div class="image-container"> <div class="text">FOREST</div> </div> </body> </html>
ผลลัพธ์
โค้ดด้านบนจะแสดงผลดังนี้ −
