Image with Transparent Text

ในบางครั้งที่เราใช้รูปภาพเพื่อตกแต่งหน้าเว็บ เราอาจจะอยากเพิ่มคำหรืออธิบายอะไรบางอย่างให้กับรูปนั้น ในบทความนี้ เราจะมาสอนให้ทุกคนใส่ข้อความลงบนภาพด้วย html และ css ไปดูโค้ดกันเลย~

.container {
 position: relative; 
 max-width: 800px;
 margin: 0 auto;
}

โค้ดด้านบนมีการกำหนดขนาด กำหนดตำแหน่ง และใส่ position: relative; เพื่อที่จะใช้ในการกำหนดตำแหน่งของ text ในขั้นตอนต่อไป

.container .content {
 position: absolute; /* Position the background text */
 top: 0;
 background: rgba(0, 0, 0, 0.5);
 color: #f1f1f1;
 width: 100%;
 padding: 20px;
}

โค้ดด้านบนมีการใส่ position: absolute; เพื่อกำหนดตำแหน่งของ text กำหนดให้ text อยู่ด้านบนสุดของภาพ และมีโค้ด background: rgba(0, 0, 0, 0.5); เพื่อกำหนด transparent ของพื้นหลังของ text ทำให้เน้นส่วน text ให้ชัดเจนมากยิ่งขึ้นและไม่กลืนไปกับรูปภาพ เท่านี้เราก็สามารถนำรูปภาพมาตกแต่งเว็บให้ดูชิคๆคูลๆมากขึ้นโดยที่ไม่ต้องเสียเวลานำไปแต่งในโปรแกรมก่อนเลย แล้วพบกันใหม่บทความหน้านะจ๊ะ :)