Home > CSS techniques > ทำ opacity ให้ cross browser

ทำ opacity ให้ cross browser

อาจจะมี web designer บางคน ที่ออกแบบเว็บไซต์ แล้วอยากจะได้ กรอบ แบบใสๆ เห็นพื้นหลัง แต่ปัญหาที่ทำให้เรา ต้องเลิกใช้มัน ก็คือ

  1. ถ้าทำให้ใส ด้วยภาพ ชนิด png มันจะใช้ได้เฉพาะ browser ใหม่ๆ IE6 ไม่ใสด้วย
  2. ทำให้ใสด้วยโค้ด css เช่น Microsoft.gradien, filter ต่างๆ ก้ใช้ได้เฉพาะ IE เบราเซอร์อื่นไม่เล่นด้วย
  3. ใช้ภาพ png แล้วใช้โค้ด png ie fix ก็ได้เหมือนกัน แต่ต้องใช้ png รูปใหญ่มาก ไฟล์หนัก โหลดช้า ไม่คุ้มค่าการใช้งาน

เว็บไซต์ เดลินิวส์ ในส่วน เมนูบาร์ใช้โค้ด css ทำให้ใส
ืmenu ie

menu ff

แอบเข้าไปดู css หน่อยซิว่าเขียนอะไรยังไง ใช้ web delveloper toolbar เจอแล้วเขียนแบบนี้น่ะเอง

#menu DD {
MARGIN-TOP: -25px;
LEFT: 150px;
WIDTH: 240px;
POSITION: absolute;
background-color: #F5F5F5;
border: 1px solid #CCCCCC;
color: #D2517E;
overflow: visible;
filter: Alpha(Opacity=90);
}

คำสั่ง filter ใช้ได้กับ IE นะ ค่า opacity มือ โฟโต้ชอป ก็คงคุ้นเคยกันอยู่ มันทำให้ภาพจางใสนั่นเอง จากเต็ม 100 ให้เป็น 90 ก็คือ จางลง 10 น่ะเอง แต่เราจะทำไง ให้ เบราเซอร์อื่นเป็นแบบนี้ด้วย ง่ายๆ แค่เพียง เติมอีก 2 บรรทัดเท่านั้น เป็น

#menu DD {

property อื่น ไม่อธิบายนะ…

filter: Alpha(Opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
}

-moz- ก็คือ สั่งให้เบราเซอร์ ตระกูล mozila รวมทั้ง firefox ทำ opacity ส่วน บรรทัดถัดมา เอาไว้สำหรับ Opera เวอชั่น 9 ขึ้นไปนะครับ ส่วนต่ำกว่านั้น ยังทำพื้นหลังใสไม่ได้ เพียงเท่านี้ เราก็ได้ พื้นใส ดังต้องการ ดูได้ทั้ง IE6 firefox1.5 ขึ้นไป (เวอชั่นต่ำกว่านี้ไม่ได้ลอง) และ แถม Opera เวอชั่น ปัจจุบัน ด้วย

ประยุกต์ใช้ opacity

CSS ดังนี้

div.transOFF {width: 300px; background-color: silver;border:1px solid black; }

div.transON {width: 300px; background-color: silver;opacity:.50;filter: alpha(opacity=50); -moz-opacity: 0.5;border:1px solid black; }

HTMLดังนี้

<div class=”transOFF” onmouseover=”this.className=’transON‘” onmouseout=”this.className=’transOFF‘”>

<p style=”padding:5px;width:75%;”>ลองเอาเมาส์แตะที่นี่ ควรจะแสดงผลเหมือนกันทั้ง IE Fx Opera เวอชั่นล่าสุดนะ</p>

</div>

ได้ผลดังนี้

ลองเอาเมาส์แตะที่นี่ ควรจะแสดงผลเหมือนกันทั้ง IE Fx Opera เวอชั่นล่าสุดนะ

***** ข้อควรระวัง เมื่อใช้ โค้ดนี้ ส่งที่อยู่ในกรอบ จะจางลงหมดไม่ว่าจะเป็น text textbox image

Related Articles


Share
Categories: CSS techniques
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. Nu
    May 29th, 2007 at 10:59 | #1

    ใส่ position:relative ใน จะทำให้ text ในกรอบไม่จางลงไปด้วยค่ะ แต่ใช้ได้เฉพาะ IE เท่านั้น ลองดูนะ

  2. Nu
    May 29th, 2007 at 11:00 | #2

    อ้าว ใส่ tag html แล้วมันไม่ติดอ่ะ เอาใหม่

    ใส่ position:relative ใน “” จะทำให้ text ในกรอบไม่จางลงไปด้วยค่ะ แต่ใช้ได้เฉพาะ IE เท่านั้น ลองดูนะ

  3. Nu
    May 29th, 2007 at 11:05 | #3

    ไม่ได้อีกละ จะบอกว่า –> ใส่ไว้ใน tag p นะ

    <p style=”padding:5px;width:75%;position:relative;”>

    :”>

  4. admin
    May 29th, 2007 at 13:55 | #4

    อ่า แล้วทำไมต้องใช้ position:relative ด้วยล่ะครับ :-?

  5. June 8th, 2007 at 22:30 | #5

    ป.ล. การใช้ filter: กำหนด Opacity จะทำให้ CSS ไม่ผ่านการตรวจสอบนะครับ
    เป็นผมจะใช้ JavaScript ในการกำหนด Opacity ครับ

  6. June 10th, 2007 at 07:30 | #6

    มีโค้ดไหมครับ เอามาโชว์หน่อยย ;)

  7. June 10th, 2007 at 22:40 | #7

    อ่อ เข้าใจแระ :d

  8. June 12th, 2007 at 21:09 | #8

    ดูหลายๆท่าน จะให้ความสำคัญ กับว่า validate หรือไม่ มากเหมือนกันนะครับ ใครอยากเอาเว็บตัวเองเช็ก ว่าโค้ดตัวเองเขียนดี เขียนถูกหรือไม่ กดไปตามปุ่ม html css มุมล่างขวา ของหน้าเว็บได้เลยครับ ส่วน divland ไม่ validate นะครับ บอกไว้ก่อน :p

  9. SP
    January 8th, 2008 at 16:40 | #9

    อยากทราบว่า ฟิวเตอร์ใช้กะ ไม่ได้เหรอคับใช้ได้แต่

  10. SP
    January 8th, 2008 at 16:45 | #10

    อยากทราบว่า ฟิวเตอร์ใช้กะ tr ไม่ได้เหรอคับใช้ได้แต่ td กะ tag อื่นๆ

  11. Petch
    November 11th, 2008 at 10:27 | #11

    ช่วยหา Script ที่ทำให้เฉพาะพื้นจางลง แต่ตัวอักษรหรืออะไรก็ได้ที่อยู่ในกล่องไม่จางลง คือแนวคิดจะให้แค่ภาพมันจางลงเท่านั้นเอง ช่วยหน่อยครับ เซียนทั้งหลายน่าจะมีทางออกให้ผมอยู่

  12. SilliconValley
    December 24th, 2008 at 14:31 | #12

    รู้สึก ie6 จะใช้ไม่ได้นะครับ ใครเป็นบ้าง

  13. วีระชาติ
    September 4th, 2009 at 09:35 | #13

    ใช้ได้นะครับ :)

  14. November 8th, 2009 at 14:31 | #14

    ถ้าเราจะทำพื้นโปร่งใส่แบบนี้ แต่เป็นบริเวณ menu ละครับ ซึ่ง menu มันเป็น link ผมทำแล้วตัวอักษรจางหายไปด้วย แล้วก็ตำแหน่งเพี้ยนเวลา mouse over

    ขอคำแนะนำหน่อยครับ

  15. deadclosed
    November 17th, 2009 at 11:44 | #15

    เซียนช่วยหน่อยครับ
    จากโค๊ดน่ะครับ IE ไม่สามารถ
    ใช้filter: Alpha(Opacity=90); ร่วมกับค่า z-index ได้
    ทำให้ เมนูดร๊อฟดาว จะโดนบังโดยค่าของ header
    ไม่ทราบจะแก้ไงกับIE ครับ
    #main{
    z-index:1;
    width:830px;
    padding:35px;
    background-color:#fff;
    opacity:.90;// ตรงนี้ปกติจะมี filter: Alpha(Opacity=90); แต่มันจะทำให้ข้อความและภาพที่อยู่ข้างบนเป็นภาพ ปรือหมด
    }
    #mainhead{
    z-index:2;
    position:relative;
    width:100%;
    font-family:Georgia;
    font-size:18px;
    text-align:left;
    padding-bottom:20px;
    }

    #mainleft{
    width:520px;
    float:left;
    text-align:left;
    font-family:arial;
    font-size:12px;
    color:#295058;
    height:100%;
    }
    #mainrigth{
    width:30%;
    text-align:right;
    }
    #headimg{
    z-index:3;
    width: 900px;
    height: 315px;

    }

    #navigater{ // ตรงนี้ให้เมนูขึ้นไปในส่วนของ mainhead
    z-index:100;
    position:relative;
    margin-top:-40px;
    width:100%;
    height:40px;
    background-color:#ccc;
    opacity:.75; // ตรงนี้ปัญหา เมื่อใช้filter: Alpha(Opacity=75 );แล้ว
    filter:alpha(opacity=75); // จะดร๊อฟดาวไม่ได้ครับ
    font-family:Georgia;
    font-size:18px;
    font-style:normal;
    font-weight:normal;
    }

    #navigater hover{
    opacity:.90;
    filter: alpha(opacity = 90);
    }
    #page-wrap{
    width: 100%;
    z-index:200;
    }

    .ใครช่วยได้บ้างครับ ช่วยหน่อย:((

  16. December 6th, 2009 at 13:25 | #16

    ข้อมูลมีประโยชน์มากครับ

  17. December 6th, 2009 at 13:27 | #17

    ข้อมูลดีๆแบบนี้หามาบอกกันเรื่อยๆนะครับ

  18. November 11th, 2010 at 16:00 | #18

    ขอบคุณสำหรับ ความรู้ใหม่ครับ ^^

  1. No trackbacks yet.