Devdit
 

HTML รูปภาพเลื่อนตามหน้าจอ วิ่งตามหน้าจอ

611

HTML รูปภาพเลื่อนตามหน้าจอ วิ่งตามหน้าจอ บทความนี้สอนเขียนภาษา CSS ร่วมกับ HTML เพื่อกำหนดการแสดงผลรูปภาพบนหน้าเว็บไซต์ และให้รูปภาพดังกล่าวเลื่อนตามหน้าจอ วิ่งตามหน้าจอ สามารถเขียนโปรแกรมได้ดังนี้

 

ตัวอย่าง HTML รูปภาพเลื่อนตามหน้าจอ วิ่งตามหน้าจอ

<style>
    .fixed {
        position: fixed;
        right: 0;
        bottom: 0;
        padding: 10px;
    }
</style>
<img src="https://www.devdit.com/favicon-16x16.png" class="fixed">

คำอธิบาย

HTML รูปภาพเลื่อนตามหน้าจอ จากตัวอย่างโหลดรูปภาพขึ้นหน้าเว็บไซต์ด้วยแท็ก img จากนั้นสร้าง class .fixed ใน CSS กำหนด position: fixed เพื่อให้รูปภาพอยู่ในตำแหน่งคงที่เลื่อนตามหน้าจอ ทางด้านขวาล่างด้วย right: 0 และ bottom: 0 ของเว็บไซต์

แก้ไข 1 ปีที่แล้ว
ชอบ
ลิ้งก์
แชร์
Devdit มีช่อง YouTube แล้ว
เราสร้างวิดีโอเกี่ยวกับเทคโนโลยี ทำตามง่ายๆ