ทำ Background โปร่งใส

ไฟล์ .gif, .png มีคุณสมบัติ ที่สามารถทำ background หรือพื้นหลังให้โปร่งใสได้ .gif นั้นเวลานำไปใช้ถ้าอยากจะให้เนียนกลืนกันพื้นหลังตอน save นั้นกำหนดสี matte ให้มันด้วย ข้อดีอย่างของ gif คือ ie6 ก็ใช้ได้ คือ เห็นว่ามันโปร่งใส แต่ถ้าเป็น png คุณ ie6 มันแสดงผลไม่ได้ จะกลายเป็นพื้นหลังสีขาวไป

png เอง ตอน save ก็มีให้เลือกว่าเป็น png8 หรือ png24 ถ้าเป็น png8 นั้นมันจะคล้ายๆ gif คือ เวลานำไปใช้ต้องกำหนด matte ให้มันด้วยไม่งั้นมันไม่เนียน การกำหนด matte ก็คือ เราต้องรู้ก่อนว่ารูปนั้นเราจะนำไปใช้กับ background สีอะไร ถ้าใช้กับ background สีขาวก็เลือก matte เป็นสีขาว ส่วน png24 นั้นใช้ได้สวยเนียนทุกงาน แต่มันก็แลกกับขนาดไฟล์ที่ใหญ่ขึ้นด้วย ถ้างานที่ต้องการพื้นหลังโปร่งใส แต่พื้นหลังมันเป็นสีพื้น ใช้ gif หรือ png8 ก็พอ แต่ถ้าพื้นหลังเป็นรูปลายเยอะๆ png24 จะดีกว่า

gif กับ png8 ค่อนข้างจะคล้ายกัน แต่ลองสังเกตเวลาที่เรา save นั้น ขนาดไฟล์ของ png8 จะเล็กกว่า gif ซึ่งก็เหมาะกับการไปใช้ในเว็บ จะได้โหลดเร็วๆ แต่อย่าลืมนะว่า png มันไม่ support กัับ ie6 … ได้อย่างเสียอย่าง :S

มาเข้าเรื่อง css กันดีกว่า ถ้าเราเกิดอยากจะได้พื้นหลังโปร่งใส เพื่อเสริมสร้างความไฮโซให้กับเว็บ เราก็เอาไอคุณสมบัติของไฟล์ gif, png นี่ล่ะมาใช้ โดยการปรับ opacity ของภาพให้ลดลงแล้วเราก็ save มันออกมา แค่นี้เอง ^^

เวลานำไปใช้ก็เขียนปกติเลย
background: url(“  “) repeat;

แนะนำนิดนึงว่า ถ้าเราต้องการพื้นหลังสีพื้นๆ อย่างเช่นสีขาวแต่โปร่งใส เราก็สร้างแค่ขนาด 1×1 px ก็พอ แล้วเทสีขาวลงไป พร้อมกับลด opacity ลงให้เหลือซัก 80% เวลานำมาใช้เราก็ repeat เอา ขนาดไฟล์ก็จะเล็ก และเว็บเราก็จะโหลดเร็ว