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

วิธีแก้รูป 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


Share
Categories: Tip & Trick
Tags:

About the author

Webmaster ของเว็บนี้และ www.toysmile.com กับ www.wondercutie.com ความสามารถ : web design, graphic design, CSS, PHP programming, wordpress, magento ตอนนี้กำลังสนใจ : การออกแบบ ตัวการ์ตูน คาแรคเตอร์ ^^

Website : http://www.divland.com

Facebook : http://www.facebook.com/divland

Twiter : http://twitter.com/divland


  1. admin
    April 26th, 2007 at 16:15 | #1

    แบบนี้ผมลองใช้แล้ว รูปมันเพี้ยนๆอะ มันยืดๆ เป็นเหมือนกันปะครับ 8-x

  2. likhi1
    April 30th, 2007 at 05:48 | #2

    มีส่วนคอนเท้นมาเพิ่มข้างล่างด้วยอ่ะ…..:d:d:d

    ว่าแต่ตรงส่วน Last Comment เนี่ย มันอัพเดทเองหรือต้องคอยก๊อบมาวางครับ…..

    (มันจะดึงฐานข้อมูลจาก MYSQL มาอัพเดทเองเหรอครับ)

  3. May 19th, 2007 at 10:28 | #3

    :-w เซ็งกับไอ้อี

  4. lovecomclub
    November 2nd, 2007 at 16:24 | #4

    เอ่อ ผมใช้แล้ว ปรากฏว่ามี ปัญหา กับ background-repeat ครับผม
    มันไม่ repeat ให้อ่ะ

    ขอบคุณมากครับ:d/

  5. April 24th, 2008 at 12:03 | #5

    ไม่ใช้ไม่ได้อะ…. ใครช่วยตอบที

  6. April 24th, 2008 at 23:19 | #6

    ใส่ path แบบเต็มเลยครับ อ้าง ตั้งแต่ www.

  7. partyman
    July 13th, 2008 at 12:24 | #7

    ต้องขอบคุณ ปัญหา PNG ทำให้

    Google พามาเจอ Blog ดีๆ แบบ นี้

  8. April 28th, 2009 at 10:29 | #8

    Thanks for this, it was very helpful.

  9. December 6th, 2009 at 15:52 | #9

    แนวนี้ชอบมากเลยครับ

  10. December 6th, 2009 at 15:52 | #10

    Thank you for good information

  11. December 8th, 2009 at 23:52 | #11

    พี่ครับมัน repeat ไม่ได้อะครับ
    ไม่รู็เปนไร แต่มัน โปร่งใสแล้วนะ

  12. June 14th, 2010 at 16:53 | #12

    ขอบคุณครับ ขอทดลองก่อนนะครับ

  13. hurababara
    July 27th, 2010 at 23:17 | #13

    แล้วถ้าไม่ได้เขียนด้วย css เขียนด้วย table ต้องใส่ code ยังไงอะคะ

  14. December 17th, 2010 at 11:11 | #14

    รูปมันเพี้ยน เหมือนกันอ่ะ ยืดๆ แก้ยังไงดีครับ@admin

  15. December 17th, 2010 at 11:29 | #15

    แก้ไขรูปเพี้ยน โดยการ ใส่ค่า width กับ height ให้กับภาพด้วย ค่าเท่าภาพจริง หรือย่อ ขยาย ก็ต้องใส่หมด แต่ภาพที่มาจาก Java ต้องแก้ที่ java@Supol
    :-?

  1. August 2nd, 2011 at 17:33 | #1