:: เทคนิคการแสดงรูปภาพบนเว็บ ด้วย Background
โพสโดย : Administrator เมื่อ : 10 ธันวาคม 2554 13:56:14
หลายท่านคงจะใช้วิธีการแสดงรูปภาพตรงๆผ่านคำสั่ง img แต่วันนี้ผมมีอีกเทคนิคง่ายๆในการแสดงรูปภาพโดยใช้เทคนิคการใช้ CSS Background ร่วมกับรูปภาพโปรงใส่

ไม่มีอะไรมากครับ เทคนิคนี้เป็นเหมือนที่หลายๆเว็บคงได้นำไปใช้กันนานแล้ว คือการแสดงรูปภาพโดยใช้คำสั่งของ Stylesheet ที่เรียกว่า Background แทน โดยปกติแล้ว ถ้าเราต้องการแสดงรูปภาพบนเว็บเรามักจะใช้คำสั่ง


แต่แบบนี้ถ้าเราคลิกขวาที่รูปภาพ แล้วเลือก Save image เราก็จะได้รูปภาพมาง่ายๆ หลายคนคงเคยพบเว็บที่เราไปเซฟรูปภาพมา แต่ดันได้ภาพใสๆ คงสงสัยกันใช่ไหมครับ ว่าเขาทำกันยังไง คำตอบนั่นคือ Stylesheet 

ก่อนอื่นเราต้องมีรูปภาพโปร่งใส่ แนะนำให้ใช้ภาพขนาด 1px พอครับ ส่วนนามสกุลก็เป็น .gif หรือ .png แล้วแต่ว่าเราจะบีบอันไหนได้เล็กกว่ากัน แต่ผมจะใช้ .gif ครับ

จากนั้นเราจะใช้คำสั่งนี้ในการแสดงรูปครับ

แค่นี้ก็เสร็จพิธีเรียบร้อย โดย image_space_url คือลิงก์ที่อยู่ของรูปภาพโปร่งใส่ที่เราทำเอาไว้ ส่วน image_url คือลิงก์ที่อยู่รูปภาพที่เราต้องการแสดงผล ลองดูการใช้งานจริงจากภาพทางด้านล่างได้เลยครับ ลองคลิกขวาแล้ว Save image ดูซิครับ

โหลดตัวอย่างไปลองเล่นดูกันได้ครับ ดาวน์โหลดตัวอย่าง

 
เข้าชม : 122 ครั้ง
ป้ายกำกับ : image, background, css, ซ่อนรูปภาพ, ป้องกันเซฟภาพ
 
ความคิดเห็นบทความ
» แสดงความคิดเห็น «
ทางเว็บไซต์ไม่มีส่วนสนับสนุน และไม่ขอรับผิดชอบต่อข้อมูลที่เกิดจากการโพสของสมาชิกทั้งหมด เช่น ข่าวสาร บทความ ความคิดเห็น เป็นต้น หากพบข้อความที่ผิดกฏระเบียบทางเว็บไซต์ หรือข้อความที่ไม่เหมาะสม กรุณาแจ้งผู้ดูแลเว็บไซต์
แสดงความคิดเห็น
กรุณารอสักครู่...กำลังโหลดข้อมูล
 
บทความอื่นๆ
Ampps โปรแกรมเว็บเซิฟเวอ...
7 มกราคม 2555 21:55:35
หายหน้าหายตาไปตั้งแต่ปีใหม่ วันนี้กลับมาเขียนบทความตาม...
แนะนำ SiXhEaD Template ส...
27 ธันวาคม 2554 02:01:08
สำหรับวันนี้ผมจะมาแนะนำ Template Engine ที่มีขนาดเล็กก...
Revolver Maps แสดงคนเข้า...
26 ธันวาคม 2554 01:16:51
สำหรับการแสดงสถิตเว็บไซต์ ส่วนมากเรามักจะเห็นกันเป็นแบ...
แสดงกล่องข้อความเมื่อนำเ...
25 ธันวาคม 2554 23:36:37
จั่วหัวแบบนี้่หลายท่านคงงง เอ๊ะมันคืออะไรยังไงหว่า ถ้า...
สร้างเครื่องเล่นมีเดียบน...
24 ธันวาคม 2554 11:03:16
การแสดงผลไฟล์มีเดียบนเว็บไซต์ในปัจจุบันมีเครื่องมือมาก...
สร้างร้านค้าออนไลน์ด้วย ...
23 ธันวาคม 2554 11:41:36
ปัจจุบันร้านค้าออนไลน์เริ่มเป็นที่นิยมในไทยกันมากขึ้น ...
รวมบทความทั้งหมด »
ลิงค์โฆษณา