การตั้งค่า GIF “ รูปแบบการแลกเปลี่ยนกราฟิก ” ภาพพื้นหลังจะเพิ่มองค์ประกอบที่ดึงดูดสายตาให้กับงานออกแบบ GIF ช่วยให้นักพัฒนาสามารถถ่ายทอดข้อมูลหรือเน้นผลิตภัณฑ์หรือบริการซึ่งช่วยในการสร้างเอกลักษณ์ทางภาพของแบรนด์ อย่างไรก็ตาม นักพัฒนาซอฟต์แวร์ต้องแน่ใจว่าการใช้ GIF จะไม่ทำให้หน้าเว็บมากเกินไปหรือทำให้ผู้ใช้ไขว้เขวจากเนื้อหาหลัก

บทความนี้สาธิตขั้นตอนการตั้งค่า GIF เป็นภาพพื้นหลังบนหน้าเว็บ

วิธีตั้งค่า GIF เป็นภาพพื้นหลังบนหน้าเว็บ

การตั้งค่า GIF เป็นภาพพื้นหลังช่วยในการสร้างองค์ประกอบที่สะดุดตาโดยการเพิ่มองค์ประกอบภาพ

GIF มีประโยชน์อย่างยิ่งในเว็บไซต์ที่ต้องการสื่อถึงความสนุกสนานหรือความตลกขบขัน หรือในหน้าที่ต้องการเน้นผลิตภัณฑ์หรือฟีเจอร์เฉพาะ สำหรับการตั้งค่าเป็นภาพพื้นหลัง ให้ไปที่ตัวอย่างต่อไปนี้:

ตัวอย่างที่ 1: การตั้งค่า GIF เป็นพื้นหลังคงที่

เนื่องจากองค์ประกอบ HTML ที่ช่วยในการสร้างเนื้อหาของหน้าเว็บถูกวางไว้ใน “ <เนื้อหา> ” แท็ก นั่นคือเหตุผลที่เลือก “ ร่างกาย ” องค์ประกอบและใช้คุณสมบัติ CSS กับมัน มีผลกับองค์ประกอบ HTML ทั้งหมดของ ' <เนื้อหา> ” แท็ก

ตัวอย่างเช่น “

' และ '

แท็ก ” ใช้เป็นเนื้อหาของหน้าเว็บ ดูข้อมูลโค้ดด้านล่าง:

< ร่างกาย >
< h1 > การตั้งค่า GIF เช่น ภาพพื้นหลังบนหน้า h1 >
< หน้า > เพิ่ม GIF นี้แล้ว เช่น ภาพพื้นหลังทั้งหน้าโดยใช้ 'ภาพพื้นหลัง' คุณสมบัติ. บทความนี้ขับเคลื่อนโดย Linuxint หน้า >
ร่างกาย >

ตอนนี้ เลือกองค์ประกอบ HTML 'เนื้อหา' ภายใน ' <สไตล์> ” แท็กหรือใน “แยกต่างหาก” ซีเอสเอส ” ไฟล์เพื่อใช้สไตล์บนหน้าเว็บ:

ร่างกาย {
ภาพพื้นหลัง: url ( 'ทะเล.gif' ) ;
พื้นหลังซ้ำ: ไม่ซ้ำ;
ขนาดพื้นหลัง: หน้าปก;
ช่องว่างภายใน: 50px;
ขนาดตัวอักษร: x-ใหญ่;
สี: ขาว;
}

ในบล็อกรหัสด้านบน:

• • ประการแรก “ URL() ใช้วิธี ” ซึ่งเก็บเส้นทางของ “ กิ๊ฟ ' ไฟล์. และเมธอดนี้จะถูกส่งผ่านเป็นค่าไปยัง CSS “ ภาพพื้นหลัง ' คุณสมบัติ.
  • ถัดไป ตั้งค่า “ ไม่ซ้ำ ” เป็นค่าให้กับ CSS “ พื้นหลังซ้ำ คุณสมบัติ ” สำหรับการทำซ้ำของไฟล์ GIF
  • จากนั้นกำหนดค่าของ “ ปิดบัง ” ถึง CSS “ ขนาดพื้นหลัง ” ให้ครอบคลุมพื้นที่ว่างทั้งหมด
  • หลังจากนั้นให้ระบุค่าของ “ 50พิกเซล ' และ ' x-ขนาดใหญ่ ” ถึง CSS “ การขยายความ ' และ ' ขนาดตัวอักษร ” คุณสมบัติตามลำดับ เพิ่มระยะห่างรอบข้อความและขยายขนาดตัวอักษร

หลังจากคอมไพล์แล้ว หน้าเว็บจะมีลักษณะดังนี้:

ผลลัพธ์ด้านบนแสดงว่ามีการเพิ่ม gif เป็นพื้นหลังบนหน้าเว็บ

ตัวอย่างที่ 2: การตั้งค่า GIF เป็นพื้นหลังแบบเลื่อนได้

เริ่มแรก สร้างโครงสร้าง HTML เพื่อสร้างเนื้อหาของเว็บเพจดังนี้:

< แผนก ระดับ = 'บรรจุ' >
< h1 > การตั้งค่า GIF เช่น ภาพพื้นหลังบนหน้า h1 >
< หน้า > เพิ่ม GIF นี้แล้ว เช่น ภาพพื้นหลังทั้งหน้าโดยใช้ 'ภาพพื้นหลัง' คุณสมบัติ. บทความนี้ขับเคลื่อนโดย Linuxint หน้า >
แผนก >

< แผนก >
< h3 สไตล์ = 'สี:ขาว;' > เนื้อหาที่เขียนนอก 'ดิฟ' องค์ประกอบ h3 >
แผนก >

ในรหัสด้านบน:

• • อันดับแรก ผู้ปกครอง “
    แท็ก ” ใช้กับคลาสของ “ บรรจุ '.
  • ต่อไป ใช้ “ h1 ' และ ' หน้า ” องค์ประกอบ HTML และจัดเตรียมเนื้อหาจำลองให้กับพวกเขา
  • หลังจากนั้นให้สร้างอีก '
    ” และใช้ “

    ” แท็กโดยให้ข้อมูลจำลองกับมัน

ตอนนี้ เพิ่ม GIF เป็นพื้นหลังบนหน้าเว็บโดยใส่คุณสมบัติ CSS ต่อไปนี้:

.contai {
ภาพพื้นหลัง: url ( ทะเล.gif ');
พื้นหลังซ้ำ: ไม่ซ้ำ;
ขนาดพื้นหลัง: หน้าปก;
ความสูง: 100vh;
จอแสดงผล: ดิ้น;
จัดรายการ: ศูนย์;
ปรับเนื้อหา: ศูนย์;
ทิศทางโค้งงอ: คอลัมน์;
สี: ขาว;
ขนาดตัวอักษร: ใหญ่;
จัดข้อความ: กึ่งกลาง;
ช่องว่างภายใน: 2rem;
}

คำอธิบายของบล็อกรหัสที่ใช้ด้านบน:

• • ขั้นแรก ให้ตั้งค่า “ เส้นทางภาพ ”, “ ไม่ซ้ำ เสื้อ” และ “ ปิดบัง ” เป็นค่าให้กับ CSS “ ภาพพื้นหลัง ”, “ พื้นหลังซ้ำ ' และ ' ขนาดพื้นหลัง ” คุณสมบัติตามลำดับ
  • จากนั้นตั้งค่าของ “ 100vh ' และ ' ดิ้น ” ถึง CSS “ ความสูง ' และ ' แสดง ' คุณสมบัติ.
  • หลังจากนั้นให้ใช้ CSS “ สี ”, “ ขนาดตัวอักษร ”, “ จัดข้อความ ' และ ' การขยายความ ” คุณสมบัติเพื่อใช้สไตล์กับเนื้อหา

หลังจากสิ้นสุดขั้นตอนการคอมไพล์ หน้าเว็บจะมีลักษณะดังนี้:

เอาต์พุตแสดงว่า “ กิ๊ฟ ” ถูกแทรกเป็นภาพพื้นหลังทั้งหน้า

บทสรุป

ในการตั้งค่า GIF เป็นภาพพื้นหลังบนหน้าเว็บ CSS “ ภาพพื้นหลัง ” คุณสมบัติที่ใช้ใน HTML “ ร่างกาย ' องค์ประกอบ. คุณสมบัติ CSS ที่ใช้กับองค์ประกอบ 'ร่างกาย' จะถูกนำไปใช้โดยอัตโนมัติกับองค์ประกอบที่มีทั้งหมด โดยการตั้งค่า “ 100vh ” เป็นค่าของคุณสมบัติความสูง ยังสามารถเปิดใช้เอฟเฟกต์การเลื่อนได้อีกด้วย ช่วยให้พื้นหลัง gif เลื่อนไปตามการเลื่อน บทความนี้ได้สาธิตวิธีตั้งค่า GIF เป็นภาพพื้นหลังบนหน้าเว็บ