การจัดการกราฟฟิกแบบ transparency ของไฟล์ png
Pictures speak louder than words. เนื่องจากคำหลากหลายคำที่เ็ป็นศัพท์ใหม่ในโลกอินเตอร์เน็ต แม้แปลเป็น Thai แล้วก็ยังทำความเข้าใจได้ยาก อาทิตย์ที่ผ่านมาทีมงานจึงได้เริ่มใส่ไอคอนในระบบเื่พื่อเป็นการพยายามสร้าง mental model ด้วยภาพค่ะ
ไอคอนที่นำมาใช้เป็นประเภท png ค่ะ และเป็น transparency ดูแล้วจะเป็นสามมิติ ซึ่งเป็นรูปแบบของ graphic แบบ web 2.0 ค่ะ เมื่อเปิดกับ Internet Explorer (IE) version 7 และ Firefox สามารถแสดงผลได้ปกติค่ะ แต่เมื่อเปิดกับ IE version 6 หรือ 5.5 ก็จะไม่สามารถแสดงส่วน transparency ได้ค่ะ จะได้เป็นพื้นหลังสีฟ้าออกมาแทนค่ะ
วิธิีการแก้ไขในตอนแรก เราทำการแปลงไฟล์ไอคอน png เป็น gif ทั้งหมดค่ะ แต่ว่ากรอบจะแตกออกมาแล้วดูไม่สวยเอาเลยค่ะ ก็เลยต้องค้นหาวิธีกันใหม่ค่ะ
แล้วก็มาเจอทางแก้ค่ะ ด้วยการใช้ CSS style ดังด้านล่างค่ะกับรูป transparency แบบ png ค่ะ แล้วเลิกสนใจ gif files ไปเลยค่ะ ว่าแล้วก็เปลี่ยนกลับกันอีกรอบค่ะ สิ่งสำคัญของการใช้ CSS เพื่อแก้ไขภาพ transparency png คือ จะต้องระบุ width กับ height ให้ถูก proportion ค่ะ
<span style="width:247px;height:216px;display:inline-block;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/lit/test.png');">
<img style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);"
src="/lit/test.png" width="247" height="216" border="0" alt="">
</span>
ผู้คนเข้าไปลงชื่อกันเป็นหมื่นคนค่ะ เพื่อกระตุ้นให้ Microsoft ทำการปรับปรุง IE 5.5 และ 6 ให้รองรับ png ได้ ซึ่งเดิมนั้น Microsoft ได้ตัดสินใจเลือก support IE สองเวอร์ชันนี้แล้วค่ะ
ความเห็น (4)
transparency
transpency
ขอบคุณค่ะอาจารย์