ทำ opacity ให้ cross browser
อาจจะมี 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
(
Nu said,
พฤษภาคม 29, 2007 @ 10:59 am
ใส่ position:relative ใน จะทำให้ text ในกรอบไม่จางลงไปด้วยค่ะ แต่ใช้ได้เฉพาะ IE เท่านั้น ลองดูนะ
Nu said,
พฤษภาคม 29, 2007 @ 11:00 am
อ้าว ใส่ tag html แล้วมันไม่ติดอ่ะ เอาใหม่
ใส่ position:relative ใน “” จะทำให้ text ในกรอบไม่จางลงไปด้วยค่ะ แต่ใช้ได้เฉพาะ IE เท่านั้น ลองดูนะ
Nu said,
พฤษภาคม 29, 2007 @ 11:05 am
ไม่ได้อีกละ จะบอกว่า –> ใส่ไว้ใน tag p นะ
<p style=”padding:5px;width:75%;position:relative;”>
:”>
admin said,
พฤษภาคม 29, 2007 @ 1:55 pm
อ่า แล้วทำไมต้องใช้ position:relative ด้วยล่ะครับ
AnGiKo said,
มิถุนายน 8, 2007 @ 10:30 pm
ป.ล. การใช้ filter: กำหนด Opacity จะทำให้ CSS ไม่ผ่านการตรวจสอบนะครับ
เป็นผมจะใช้ JavaScript ในการกำหนด Opacity ครับ
admin said,
มิถุนายน 10, 2007 @ 7:30 am
มีโค้ดไหมครับ เอามาโชว์หน่อยย
admin said,
มิถุนายน 10, 2007 @ 10:40 pm
อ่อ เข้าใจแระ
admin said,
มิถุนายน 12, 2007 @ 9:09 pm
ดูหลายๆท่าน จะให้ความสำคัญ กับว่า validate หรือไม่ มากเหมือนกันนะครับ ใครอยากเอาเว็บตัวเองเช็ก ว่าโค้ดตัวเองเขียนดี เขียนถูกหรือไม่ กดไปตามปุ่ม html css มุมล่างขวา ของหน้าเว็บได้เลยครับ ส่วน divland ไม่ validate นะครับ บอกไว้ก่อน
SP said,
มกราคม 8, 2008 @ 4:40 pm
อยากทราบว่า ฟิวเตอร์ใช้กะ ไม่ได้เหรอคับใช้ได้แต่
SP said,
มกราคม 8, 2008 @ 4:45 pm
อยากทราบว่า ฟิวเตอร์ใช้กะ tr ไม่ได้เหรอคับใช้ได้แต่ td กะ tag อื่นๆ
Petch said,
พฤศจิกายน 11, 2008 @ 10:27 am
ช่วยหา Script ที่ทำให้เฉพาะพื้นจางลง แต่ตัวอักษรหรืออะไรก็ได้ที่อยู่ในกล่องไม่จางลง คือแนวคิดจะให้แค่ภาพมันจางลงเท่านั้นเอง ช่วยหน่อยครับ เซียนทั้งหลายน่าจะมีทางออกให้ผมอยู่
SilliconValley said,
ธันวาคม 24, 2008 @ 2:31 pm
รู้สึก ie6 จะใช้ไม่ได้นะครับ ใครเป็นบ้าง
วีระชาติ said,
กันยายน 4, 2009 @ 9:35 am
ใช้ได้นะครับ
BasicNeeds said,
พฤศจิกายน 8, 2009 @ 2:31 pm
ถ้าเราจะทำพื้นโปร่งใส่แบบนี้ แต่เป็นบริเวณ menu ละครับ ซึ่ง menu มันเป็น link ผมทำแล้วตัวอักษรจางหายไปด้วย แล้วก็ตำแหน่งเพี้ยนเวลา mouse over
ขอคำแนะนำหน่อยครับ
deadclosed said,
พฤศจิกายน 17, 2009 @ 11:44 am
เซียนช่วยหน่อยครับ
จากโค๊ดน่ะครับ 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;
}
.ใครช่วยได้บ้างครับ ช่วยหน่อย
โหลดเพลง mp3 said,
ธันวาคม 6, 2009 @ 1:25 pm
ข้อมูลมีประโยชน์มากครับ
ดาวน์โหลดเพลงใหม่ฟรี said,
ธันวาคม 6, 2009 @ 1:27 pm
ข้อมูลดีๆแบบนี้หามาบอกกันเรื่อยๆนะครับ