ทำ opacity ให้ cross browser
May 28th
อาจจะมี web designer บางคน ที่ออกแบบเว็บไซต์ แล้วอยากจะได้ กรอบ แบบใสๆ เห็นพื้นหลัง แต่ปัญหาที่ทำให้เรา ต้องเลิกใช้มัน ก็คือ
- ถ้าทำให้ใส ด้วยภาพ ชนิด png มันจะใช้ได้เฉพาะ browser ใหม่ๆ IE6 ไม่ใสด้วย
- ทำให้ใสด้วยโค้ด css เช่น Microsoft.gradien, filter ต่างๆ ก้ใช้ได้เฉพาะ IE เบราเซอร์อื่นไม่เล่นด้วย
- ใช้ภาพ png แล้วใช้โค้ด png ie fix ก็ได้เหมือนกัน แต่ต้องใช้ png รูปใหญ่มาก ไฟล์หนัก โหลดช้า ไม่คุ้มค่าการใช้งาน
เว็บไซต์ เดลินิวส์ ในส่วน เมนูบาร์ใช้โค้ด css ทำให้ใส
แอบเข้าไปดู 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
ใส่ position:relative ใน จะทำให้ text ในกรอบไม่จางลงไปด้วยค่ะ แต่ใช้ได้เฉพาะ IE เท่านั้น ลองดูนะ
อ้าว ใส่ tag html แล้วมันไม่ติดอ่ะ เอาใหม่
ใส่ position:relative ใน “” จะทำให้ text ในกรอบไม่จางลงไปด้วยค่ะ แต่ใช้ได้เฉพาะ IE เท่านั้น ลองดูนะ
ไม่ได้อีกละ จะบอกว่า –> ใส่ไว้ใน tag p นะ
<p style=”padding:5px;width:75%;position:relative;”>
:”>
อ่า แล้วทำไมต้องใช้ position:relative ด้วยล่ะครับ
ป.ล. การใช้ filter: กำหนด Opacity จะทำให้ CSS ไม่ผ่านการตรวจสอบนะครับ
เป็นผมจะใช้ JavaScript ในการกำหนด Opacity ครับ
มีโค้ดไหมครับ เอามาโชว์หน่อยย
อ่อ เข้าใจแระ
ดูหลายๆท่าน จะให้ความสำคัญ กับว่า validate หรือไม่ มากเหมือนกันนะครับ ใครอยากเอาเว็บตัวเองเช็ก ว่าโค้ดตัวเองเขียนดี เขียนถูกหรือไม่ กดไปตามปุ่ม html css มุมล่างขวา ของหน้าเว็บได้เลยครับ ส่วน divland ไม่ validate นะครับ บอกไว้ก่อน
อยากทราบว่า ฟิวเตอร์ใช้กะ ไม่ได้เหรอคับใช้ได้แต่
อยากทราบว่า ฟิวเตอร์ใช้กะ tr ไม่ได้เหรอคับใช้ได้แต่ td กะ tag อื่นๆ
ช่วยหา Script ที่ทำให้เฉพาะพื้นจางลง แต่ตัวอักษรหรืออะไรก็ได้ที่อยู่ในกล่องไม่จางลง คือแนวคิดจะให้แค่ภาพมันจางลงเท่านั้นเอง ช่วยหน่อยครับ เซียนทั้งหลายน่าจะมีทางออกให้ผมอยู่
รู้สึก ie6 จะใช้ไม่ได้นะครับ ใครเป็นบ้าง
ใช้ได้นะครับ
ถ้าเราจะทำพื้นโปร่งใส่แบบนี้ แต่เป็นบริเวณ menu ละครับ ซึ่ง menu มันเป็น link ผมทำแล้วตัวอักษรจางหายไปด้วย แล้วก็ตำแหน่งเพี้ยนเวลา mouse over
ขอคำแนะนำหน่อยครับ
เซียนช่วยหน่อยครับ
จากโค๊ดน่ะครับ 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;
}
.ใครช่วยได้บ้างครับ ช่วยหน่อย
ข้อมูลมีประโยชน์มากครับ
ข้อมูลดีๆแบบนี้หามาบอกกันเรื่อยๆนะครับ