Posts tagged png

อัพเดท script fix png สำหรับ IE6, IE5.5

มีสคริปมาอัพเดทกัน 1 ตัวครับ อันเดิมคือ อันนี้ครับ
วิธีแก้รูป png ใน IE มีพื้นสีเทา จากอันเดิมที่ว่ามันไม่สามารถ ใช้ png ใส มาเป็น background repeat ได้ แต่บัดนี้ มันทำได้แล้วครับ ลองโหลดไปใช้กันดู ไฟล์สคริป พร้อมตัวอย่าง

ดาวน์โหลด IEpngfix

*แต่ยังกำหนด background-position ไม่ได้เหมือนเดิม อยู่ซ้ายบนตลอดครับ :P

Related Articles

Share
Categories: Tip & Trick
Tags:

วิธีแก้รูป png ใน IE มีพื้นสีเทา

หากใครเคยใช้รูปภาพแบบ .png แบบพื้นหลังใส แล้วละก็ คงจะเคยพบกับปัญหา ที่เกิดพื้นสีเทาขึ้นตรงที่ต้องการให้เป็น transparent เฉพาะ IE6 จนต้องเปลี่ยนไปใช้ gif หรือ jpg ตามเดิม ทั้งที่ IE7 , Firefox ก็แสดงผล png ได้อย่างไม่มีปัญหา

วิธีแก้ png IE6

  1. ดาวน์โหลด ไฟล์นี้ png ie6 fix.zip ซึ่งจะมี ไฟล์ iepngfix.htc และ blank.gif
  2. แตกมันออกมาแล้วอัพโหลด 2 ไฟล์นี้ ไปที่เดียวกับ ไฟล์ css ของคุณ
  3. แล้วเขียนในไฟล์ css ของคุณแบบนี้ img { behavior: url(iepngfix.htc); }

** ถ้าหากภาพ png ไม่ได้เป็น แท็ก <img> แต่เป็นแบ็คกราวน์ เช่น

#header { background:url(header.png); }

เราก็สามารถเขียนเข้าไปแบบนี้ได้เลย แต่บรรทัดบนที่เรียก bg ยังต้องเขียนอยู่นะครับ

img, #header { behavior: url(iepngfix.htc); }

หรือ

#header { background:url(header.png); }
#header { behavior: url(iepngfix.htc); }

ติดกันแบบนี้เลยก็ได้

ที่สำคัญคือเขียน path ให้ถูกต้อง และรูปที่เป็นแบ็คกราวน์ repeat ในส่วน repeat จะไม่ทำงาน ใช้ได้เฉพาะภาพที่เป็นภาพเดียว หรือ no-repeat เท่านั้น

ถ้าคุณใช้ IE7, Firefox หรือ Opera เปิด divland คุณจะเห็นว่ามีเส้นเฉียงเป็นพื้นหลัง แต่ถ้าใช้ IE6 คุณจะเห็นว่ามีเส้นเล็กๆอยู่มุมบนซ้ายเส้นเดียว เพราะมันไม่ repeat

ถ้าใครแก้ ตัวจาวาสคริปให้มัน repeat ได้ หรือ ไปเจอเทคนิคอื่นที่ สามารถ ซ่อม png transparant in IE6 แบบ repeat ได้ละก็ บอกผมด้วยนะครับ :)

Related Articles