ฉันใช้ CSS นี้เพื่อความทึบของพื้นหลังของ<div>
:
background: rgba(255, 255, 255, 0.3);
มันทำงานได้ดีใน Firefox แต่ไม่ใช่ใน IE 8 ฉันจะทำให้มันทำงานได้อย่างไร?
ฉันใช้ CSS นี้เพื่อความทึบของพื้นหลังของ<div>
:
background: rgba(255, 255, 255, 0.3);
มันทำงานได้ดีใน Firefox แต่ไม่ใช่ใน IE 8 ฉันจะทำให้มันทำงานได้อย่างไร?
คำตอบ:
สร้าง png ที่มีขนาดใหญ่กว่า 1x1 พิกเซล (ขอบคุณสามสิบดอท) ซึ่งตรงกับความโปร่งใสของพื้นหลังของคุณ
แก้ไข: หากต้องการถอยกลับสำหรับการสนับสนุน IE6 + คุณสามารถระบุ bkgd chunk สำหรับ png ซึ่งเป็นสีที่จะแทนที่ความโปร่งใสของอัลฟ่าที่แท้จริงหากไม่รองรับ คุณสามารถแก้ไขได้ด้วย gimp เช่น
1x1
: stackoverflow.com/questions/7764751/…
ในการจำลองพื้นหลัง RGBA และ HSLA ใน IE คุณสามารถใช้ตัวกรองการไล่ระดับสีที่มีสีเริ่มต้นและสีสิ้นสุดเหมือนกัน (ช่องอัลฟาเป็นคู่แรกในค่า HEX)
background: rgba(255, 255, 255, 0.3); /* browsers */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */
ฉันเชื่อว่านี่เป็นสิ่งที่ดีที่สุดเพราะในหน้านี้มีเครื่องมือที่จะช่วยคุณสร้างพื้นหลังแบบอัลฟาโปร่งใส:
" CSS พื้นหลังโปร่งใสอัลฟ่าข้ามเบราว์เซอร์ (rgba) " (* เชื่อมโยงกับ archive.org แล้ว)
#div {
background:rgb(255,0,0);
background: transparent\9;
background:rgba(255,0,0,0.3);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFF0000,endColorstr=#4cFF0000);
zoom: 1;
}
ภาพ png โปร่งใสจะไม่ทำงานใน IE 6- ทางเลือก ได้แก่ :
ด้วย CSS:
.transparent {
/* works for IE 5+. */
filter:alpha(opacity=30);
/* works for IE 8. */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
/* works for old school versions of the Mozilla browsers like Netscape Navigator. */
-moz-opacity:0.3;
/* This is for old versions of Safari (1.x) with KHTML rendering engine */
-khtml-opacity: 0.3;
/* This is the "most important" one because it's the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. */
opacity: 0.3;
}
หรือแค่ทำด้วย jQuery:
// a crossbrowser solution
$(document).ready(function(){
$(".transparent").css('opacity','.3');
});
แม้ว่าจะสายไปแล้ว แต่ฉันต้องใช้วันนี้และพบสคริปต์ php ที่มีประโยชน์มากที่นี่ซึ่งจะช่วยให้คุณสร้างไฟล์ png แบบไดนามิกเหมือนกับวิธีการทำงานของ rgba
background: url(rgba.php?r=255&g=100&b=0&a=50) repeat;
background: rgba(255,100,0,0.5);
สามารถดาวน์โหลดสคริปต์ได้ที่นี่: http://lea.verou.me/wp-content/uploads/2009/02/rgba.zip
ฉันรู้ว่ามันอาจไม่ใช่วิธีแก้ปัญหาที่สมบูรณ์แบบสำหรับทุกคน แต่ก็ควรพิจารณาในบางกรณีเนื่องจากช่วยประหยัดเวลาได้มากและทำงานได้อย่างไม่มีที่ติ หวังว่าจะช่วยใครสักคน!
rgba
หรือไม่ หรือมักจะได้รับการร้องขอจากผู้ใช้ทุกคนและไม่แสดง?
ส่วนใหญ่เบราว์เซอร์ทั้งหมดรองรับโค้ด RGBa ใน CSS แต่มีเพียง IE8 และระดับต่ำกว่าเท่านั้นที่ไม่รองรับโค้ด RGBa css สำหรับนี่คือวิธีแก้ปัญหา สำหรับวิธีแก้ปัญหาคุณต้องทำตามรหัสนี้และจะดีกว่าที่จะทำตามลำดับไม่เช่นนั้นคุณจะไม่ได้ผลลัพธ์ที่สมบูรณ์แบบตามที่คุณต้องการ ฉันใช้รหัสนี้และส่วนใหญ่สมบูรณ์แบบ แสดงความคิดเห็นถ้ามันสมบูรณ์แบบ
.class
{
/* Web browsers that does not support RGBa */
background: rgb(0, 0, 0);
/* IE9/FF/chrome/safari supported */
background: rgba(0, 0, 0, 0.6);
/* IE 8 suppoerted */
/* Here some time problem for Hover than you can use background color/image */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000)";
/* Below IE7 supported */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000);
}
คุณใช้ css เพื่อเปลี่ยนความทึบ ในการรับมือกับ IE คุณต้องมีสิ่งต่างๆเช่น:
.opaque {
opacity : 0.3;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
}
แต่ปัญหาเดียวของเรื่องนี้คือมันหมายความว่าอะไรก็ตามที่อยู่ในคอนเทนเนอร์จะมีความทึบ 0.3 ดังนั้นคุณจะต้องเปลี่ยน HTML ของคุณให้มีคอนเทนเนอร์อื่นไม่ใช่ในคอนเทนเนอร์โปร่งใสที่เก็บเนื้อหาของคุณ
มิฉะนั้นเทคนิค png จะใช้ได้ผล ยกเว้นคุณต้องการการแก้ไขสำหรับ IE6 ซึ่งอาจทำให้เกิดปัญหาได้
rgba()
จนถึงเวอร์ชัน 3 และ Opera ไม่รองรับจนถึงเวอร์ชัน 10
ฉันมางานปาร์ตี้สาย แต่สำหรับใครก็ตามที่พบสิ่งนี้บทความนี้มีประโยชน์มาก: http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/
ใช้ตัวกรองการไล่ระดับสีเพื่อแสดงสีทึบ แต่โปร่งใส
ในการใช้rgba
พื้นหลังใน IE มีทางเลือก
เราต้องใช้คุณสมบัติตัวกรอง ที่ใช้ARGB
background:none;
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
zoom: 1;
นี่คือทางเลือกสำหรับ rgba(255, 255, 255, 0.2)
เปลี่ยน#33ffffff
ตามของคุณ
ARGB
สำหรับRGBA
สิ่งนี้ได้ผลสำหรับฉันในการแก้ปัญหาใน IE8:
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
ไชโย
วิธีนี้ได้ผลจริงลองดู ทดสอบใน IE8
.dash-overlay{
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)";
}
เป็นเรื่องง่ายมากที่คุณต้องให้ก่อนอื่นคุณต้องให้ backgound เป็น rgb เนื่องจาก Internet Explorer 8 จะรองรับ rgb แทน rgba จากนั้นคุณต้องให้ความทึบเช่น filter:alpha(opacity=50);
background:rgb(0,0,0);
filter:alpha(opacity=50);
นี่เป็นโซลูชันความโปร่งใสสำหรับเบราว์เซอร์ส่วนใหญ่รวมถึง IE x
.transparent {
/* Required for IE 5, 6, 7 */
/* ...or something to trigger hasLayout, like zoom: 1; */
width: 100%;
/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);
/* Older than Firefox 0.9 */
-moz-opacity:0.5;
/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;
/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
}
ทางออกที่ดีที่สุดที่ฉันพบคือสิ่งที่ David J Marland เสนอในบล็อกของเขาเพื่อรองรับความทึบในเบราว์เซอร์เก่า (IE 6+):
.alpha30{
background:rgb(255,0,0); /* Fallback for web browsers that don't support RGBa nor filter */
background: transparent\9; /* backslash 9 hack to prevent IE 8 from falling into the fallback */
background:rgba(255,0,0,0.3); /* RGBa declaration for browsers that support it */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFF0000,endColorstr=#4cFF0000); /* needed for IE 6-8 */
zoom: 1; /* needed for IE 6-8 */
}
/*
* CSS3 selector (not supported by IE 6 to IE 8),
* to avoid IE more recent versions to apply opacity twice
* (once with rgba and once with filter)
*/
.alpha30:nth-child(n) {
filter: none;
}
หลังจากค้นหาเป็นจำนวนมากฉันพบวิธีแก้ปัญหาต่อไปนี้ซึ่งใช้ได้ผลในกรณีของฉัน:
.opacity_30{
background:rgb(255,255,255); /* Fallback for web browsers that don't support neither RGBa nor filter */
background: transparent\9; /* Backslash 9 hack to prevent IE 8 from falling into the fallback */
background:rgba(255,255,255,0.3); /* RGBa declaration for modern browsers */
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF); /* IE 8 suppoerted; Sometimes Hover issues may occur, then we can use transparent repeating background image :( */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF); /* needed for IE 6-7 */
zoom: 1; /* Hack needed for IE 6-8 */
}
/* To avoid IE more recent versions to apply opacity twice (once with rgba and once with filter), we need the following CSS3 selector hack (not supported by IE 6-8) */
.opacity_30:nth-child(n) {
filter: none;
}
* สำคัญ:ในการคำนวณ ARGB (สำหรับ IE) จาก RGBA เราสามารถใช้เครื่องมือออนไลน์:
rgba()
ไม่รองรับค่าสีใน IE 8