CSS: แทรกรูปภาพ - นั่นคือวิธีการทำงาน
ในคำแนะนำเชิงปฏิบัตินี้เราอธิบายวิธีแทรกรูปภาพโดยใช้ CSS โดยทั่วไปแล้วรูปภาพสามารถแทรกที่นี่ในรูปแบบของภาพพื้นหลังเท่านั้น อย่างไรก็ตามนั่นก็เพียงพอแล้ว
แทรกรูปภาพใน CSS
ตัวอย่างเช่นหากคุณต้องการรวมภาพไว้ในส่วนหัวโดยใช้ CSS เช่นโลโก้ของคุณให้ประกาศคุณสมบัติต่อไปนี้ภายใต้ #header:
- "background: url (image.webp) #FFFFFF;"
- ที่นี่ "bild.webp" เป็นที่เข้าใจกันว่าเป็น URL ของภาพของคุณเทียบกับไฟล์ css หรือที่อยู่แบบสัมบูรณ์ในไดรฟ์ของคุณ
- ด้วยสีที่คุณประกาศสีพื้นหลังบนเว็บไซต์ของคุณ
- ตอนนี้ภาพสามารถจัดตำแหน่งโดยใช้ตำแหน่งที่แน่นอนเช่น: "ตำแหน่งพื้นหลัง: 100px 100px;" หรือผ่านข้อมูลที่สัมพันธ์กันซึ่งกำหนดโดยขอบหน้าต่างเช่น "พื้นหลังตำแหน่ง: ด้านล่างขวา;"
- เพื่อให้ภาพของคุณไม่ซ้ำตัวเองอย่างต่อเนื่องคุณสามารถระบุ "ไม่ซ้ำ" ภายใต้คุณสมบัติ "พื้นหลังซ้ำ" ดูเหมือนว่า: "background-repeat: no-repeat;"
- ด้วยคุณสมบัติ "แนบพื้นหลัง" คุณกำหนดว่ารูปภาพจะย้ายไปพร้อมกับการเลื่อนหรืออยู่ในตำแหน่งคงที่ในหน้า: "แนบมากับพื้นหลัง: คงที่"
- คุณสมบัติถูกระบุในไฟล์ CSS โดยไม่มีเครื่องหมายคำพูด
ในเคล็ดลับการปฏิบัติถัดไปให้อ่านวิธีรวมไฟล์ CSS โดยใช้ HTML