ในการตั้งค่าข้อความในกล่องโปร่งใสด้วย CSS3 โค้ดมีดังนี้ −
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .transparentBox { background: url("https://i.picsum.photos/id/249/1000/300.jpg") repeat; border: 2px solid black; } .transparentText { margin: 30px; background-color: #ffffff; border: 1px solid black; opacity: 0.6; } .transparentText p { margin: 5%; font-weight: bolder; color: #000000; font-size: 20px; } </style> </head> <body> <h1>Text in transparent box example</h1> <div class="transparentBox"> <div class="transparentText"> <p>This is some random text inside the transparent box</p> </div> </div> </body> </html>
ผลลัพธ์
โค้ดด้านบนจะแสดงผลดังนี้ −
