Image in Text Background

0



{getButton} $text={DEMO} $icon={link} $color={purple} 

      ในบทความนี้ เราจะใช้ 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: 250px;
            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>THUMARIYA BLOG</h1>
</body>
 
</html>
Ref. https://www.geeksforgeeks.org/

ที่มาครูสมชายคัดมาจาก : {getButton} $text={อ้างอิงที่มา} $icon={link} $color={red}
>>>TRY TO CHECK OUT , IF ANY ERROR FOUND. PLEASE LET ME KNOW BY COMMENT.
I'LL TRY MY LEVEL BEST TO FIX THE PROBLEM.
                                                                THANKS FOR VISITING thumariya.blogspot
Have a nice day!
-------------------------- -------------------------
>>>ลองตรวจสอบหากพบข้อผิดพลาด โปรดแจ้งให้เราทราบโดยแสดงความคิดเห็น
ฉันจะพยายามระดับของฉันให้ดีที่สุดเพื่อแก้ไขปัญหา
ขอบคุณสำหรับการเยี่ยมชม thumariya.blogspot
ขอให้เป็นวันที่ดี!

-------------------------- -------------------------

{fullWidth}

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