Image in Text Background

bysemicon -
0

 



DEMO: https://semicon.github.io/codedemo/

      ในบทความนี้ เราจะใช้ HTML และ CSS เพื่อตั้งค่ารูปภาพเป็นพื้นหลังข้อความ ในการตั้งค่ารูปภาพในพื้นหลังข้อความ จะใช้คุณสมบัติ CSS บางอย่าง หากต้องการเพิ่มรูปภาพลงในพื้นหลังข้อความโดยใช้ HTML และ CSS ให้สร้างองค์ประกอบคอนเทนเนอร์ (เช่น `<div>`) ตั้งค่าพื้นหลังเป็นรูปภาพที่ต้องการโดยใช้ CSS ('คุณสมบัติพื้นหลังรูปภาพ') และปรับคุณสมบัติข้อความ (เช่น เช่น สี, ขนาด) เพื่อให้ง่ายต่อการอ่าน

ใช้ positioning และ  z-index ของ CSS เพื่อวางข้อความไว้เหนือรูปภาพ คุณยังใช้ตัวเลือก Background Size และ background-position  เพื่อควบคุมลักษณะที่ปรากฏของรูปภาพภายในคอนเทนเนอร์ได้ด้วย

ตัวอย่าง


<!DOCTYPE html>
<html>
 
<head>
    <title>
         Image in Text Background
    </title>
 
    <style>
        body {
            margin: 0;
            padding: 0;
            text-align: center;
            background:#000;
        }
 
        h1 {
            display: inline-block;
            margin: 0;
            font-size: 400px;
            background-image: url('https://ivctechnologies.com/wp-content/uploads/2019/03/AdobeStock_127654333.jpeg');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            color: transparent;
            background-clip: text;
            -webkit-background-clip: text;
        }
    </style>
</head>
 
<body>
    <h1>Kru Chian</h1>
</body>
 
</html>
Ref. https://www.geeksforgeeks.org/

Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า