ความทึบของพื้นหลัง CSS โดย rgba ไม่ทำงานใน IE 8


110

ฉันใช้ CSS นี้เพื่อความทึบของพื้นหลังของ<div>:

background: rgba(255, 255, 255, 0.3);

มันทำงานได้ดีใน Firefox แต่ไม่ใช่ใน IE 8 ฉันจะทำให้มันทำงานได้อย่างไร?

คำตอบ:


73

สร้าง png ที่มีขนาดใหญ่กว่า 1x1 พิกเซล (ขอบคุณสามสิบดอท) ซึ่งตรงกับความโปร่งใสของพื้นหลังของคุณ

แก้ไข: หากต้องการถอยกลับสำหรับการสนับสนุน IE6 + คุณสามารถระบุ bkgd chunk สำหรับ png ซึ่งเป็นสีที่จะแทนที่ความโปร่งใสของอัลฟ่าที่แท้จริงหากไม่รองรับ คุณสามารถแก้ไขได้ด้วย gimp เช่น


2
ได้. rgba()ไม่รองรับค่าสีใน IE 8
Paul D. Waite

11
เพื่อหลีกเลี่ยงปัญหาที่อาจเกิดขึ้นให้ใช้ขนาดอื่นที่ไม่ใช่1x1: stackoverflow.com/questions/7764751/…
30thdot

43
จะเป็นที่ยอมรับในปี 2003 แต่ไม่ใช่ในปี 2013 ให้ใช้ -ms-filter สำหรับการสนับสนุนแบบจำลองใน IE รุ่นเก่าหรือดีกว่าก็อย่าสนใจ ผู้ที่ใช้ IE8- สมควรถูกลงโทษหากไม่เห็นรัศมีขอบพื้นหลังโปร่งใส ฯลฯ
Evgeny

21
@EugeneXa ฉันทำงานให้กับลูกค้าไม่ใช่อย่างอื่น ถ้าพวกเขาใช้ IE8 ฉันก็สนับสนุน การลงโทษผู้มีโอกาสเป็นลูกค้าไม่ใช่ธุรกิจที่ดี
Eli

14
@EugeneXa ไซต์ของฉันใกล้ถึง 10% แล้วและมักเป็นลูกค้าที่ดี ไม่มีคำตอบเดียวที่ถูกต้องที่นี่ คำนวณและหาสิ่งที่เหมาะกับคุณ แม้ 6% อาจใหญ่มากสำหรับบางไซต์! ผู้ใช้ไม่สมควรถูกลงโทษ ฉันคิดว่าคุณจะเสียใจกับทัศนคตินั้น
Eli

241

ในการจำลองพื้นหลัง RGBA และ HSLA ใน IE คุณสามารถใช้ตัวกรองการไล่ระดับสีที่มีสีเริ่มต้นและสีสิ้นสุดเหมือนกัน (ช่องอัลฟาเป็นคู่แรกในค่า HEX)

background: rgba(255, 255, 255, 0.3); /* browsers */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */

2
สิ่งนี้ใช้ได้ผลดี แต่น่าเสียดายที่ดูเหมือนว่าจะหยุดทำงานหากองค์ประกอบถูกซ่อนแบบไดนามิกและแสดงใหม่โดยใช้ jQuery ...
jackocnr

rgba IE filter มีประโยชน์มากและฉันสามารถหลีกเลี่ยง> ie7
codingbbq

ความทึบของ 0.6 สำหรับฟิลเตอร์คืออะไร?
Si8

10
รหัส Hex สำหรับความโปร่งใส (คู่แรก) สามารถพบได้ที่นี่: ( stackoverflow.com/questions/15852122/hex-transparency-in-colors )
user1794295

2
มีเครื่องคิดเลขสำหรับค่า hex ที่กำหนดเองของ IE!
nietonfir

14

ฉันเชื่อว่านี่เป็นสิ่งที่ดีที่สุดเพราะในหน้านี้มีเครื่องมือที่จะช่วยคุณสร้างพื้นหลังแบบอัลฟาโปร่งใส:

" 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;
}

และ remeber ใช้สี RGBA hex ในตัวกรองเสมอ: eq # 004F80 คือ # ed004F80
user956584

9

ภาพ 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');
});

24
อัลฟ่าพื้นหลังไม่เหมือนกับความทึบ (ไม่ทำให้องค์ประกอบลูกโปร่งใสเกินไป)
Alexey Smolyakov

1
นี่ไม่ใช่การตอบคำถามและไม่ได้ใช้ CSS ผ่าน jQuery (หรือ JavaScript โดยทั่วไป) ซึ่งเป็นโซลูชัน crossbrowser
mystrdat

7

แม้ว่าจะสายไปแล้ว แต่ฉันต้องใช้วันนี้และพบสคริปต์ 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

ฉันรู้ว่ามันอาจไม่ใช่วิธีแก้ปัญหาที่สมบูรณ์แบบสำหรับทุกคน แต่ก็ควรพิจารณาในบางกรณีเนื่องจากช่วยประหยัดเวลาได้มากและทำงานได้อย่างไม่มีที่ติ หวังว่าจะช่วยใครสักคน!


2
วิธีนี้ทำงานอย่างไร - URL rgba.php ร้องขอโดยเบราว์เซอร์ที่ไม่รองรับเท่านั้นrgbaหรือไม่ หรือมักจะได้รับการร้องขอจากผู้ใช้ทุกคนและไม่แสดง?
Darren Cook

ความหวังของฉันคือเบราว์เซอร์จะเห็นพื้นหลังที่สองโดยอัตโนมัติและเพิกเฉยต่อสิ่งแรกก่อนที่จะพยายามส่งคำขอ แต่นั่นเป็นการคาดเดาที่มีการศึกษามากที่สุด
หมุน

7

ส่วนใหญ่เบราว์เซอร์ทั้งหมดรองรับโค้ด 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);
 }

5

คุณใช้ css เพื่อเปลี่ยนความทึบ ในการรับมือกับ IE คุณต้องมีสิ่งต่างๆเช่น:

.opaque {
    opacity : 0.3;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
}

แต่ปัญหาเดียวของเรื่องนี้คือมันหมายความว่าอะไรก็ตามที่อยู่ในคอนเทนเนอร์จะมีความทึบ 0.3 ดังนั้นคุณจะต้องเปลี่ยน HTML ของคุณให้มีคอนเทนเนอร์อื่นไม่ใช่ในคอนเทนเนอร์โปร่งใสที่เก็บเนื้อหาของคุณ

มิฉะนั้นเทคนิค png จะใช้ได้ผล ยกเว้นคุณต้องการการแก้ไขสำหรับ IE6 ซึ่งอาจทำให้เกิดปัญหาได้


4
ฮ่าฮ่ากรณีทั่วไปของเบราว์เซอร์ไม่ได้ทำหน้าที่เช่นเดียวกับส่วนที่เหลือและรุ่นของเบราว์เซอร์ที่ไม่ได้ทำหน้าที่เหมือนรุ่นอื่น ๆ ของแต่ละเดียวกันเบราว์เซอร์ ... เพียง แต่ไมโครซอฟท์สามารถบรรลุนี้ค่อนข้างประสบความสำเร็จ ...
ClarkeyBoy

3
@Paul D. Waite: มีคุณสมบัติมากมายที่เบราว์เซอร์นำเสนอนอกเหนือจากการแสดงเนื้อหา การเบี่ยงเบนจากข้อมูลจำเพาะไม่ใช่คุณลักษณะ (หรือไม่ควร)
Bobby Jack

@ พอลดีไวต์: โอเคฉันเห็นประเด็นของคุณ แต่สิ่งที่ฉันหมายถึงคือ IE เวอร์ชันต่างๆทำหน้าที่แตกต่างกันมากจนฉันพบว่าตัวเองต้องสร้างสไตล์ชีทที่แตกต่างกันสำหรับแต่ละเวอร์ชัน ... ฉันมีสไตล์ชีทที่แตกต่างกันสำหรับ IE6, 7 และ 8 ... แต่ฉันมีเพียงสไตล์ชีทเดียวสำหรับ FF / Chrome / Opera / Safari ทั้งหมด @Bobby Jack: Seconded ...
ClarkeyBoy

@Bobby: แน่นอน แต่ IE 8 ไม่ได้เบี่ยงเบนไปจากมาตรฐานมากกว่า IE 7 หรือ IE 6 กันแน่?
Paul D.Waite

@ClarkeyBoy: แน่นอน ฉันพบว่าสไตล์ชีต IE 8 ของฉันนั้นเรียบง่ายกว่าสไตล์ชีท IE 6 ของฉันมาก IE เป็นเบราว์เซอร์ที่แปลกที่สุด แต่ก็ค่อยๆสอดคล้องกับเบราว์เซอร์อื่น ๆ Firefox ไม่รองรับrgba()จนถึงเวอร์ชัน 3 และ Opera ไม่รองรับจนถึงเวอร์ชัน 10
Paul D. Waite

4

ฉันมางานปาร์ตี้สาย แต่สำหรับใครก็ตามที่พบสิ่งนี้บทความนี้มีประโยชน์มาก: http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/

ใช้ตัวกรองการไล่ระดับสีเพื่อแสดงสีทึบ แต่โปร่งใส



2

ในการใช้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


มองหาตัวแปลง ARGB เป็น RGBA ตลอดไปขอบคุณ! web.archive.org/web/20131207234608/http://kilianvalkhof.com/…
Justin

1

สิ่งนี้ได้ผลสำหรับฉันในการแก้ปัญหาใน IE8:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";

ไชโย


1

วิธีนี้ได้ผลจริงลองดู ทดสอบใน IE8

.dash-overlay{ 
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; 
}

0

เป็นเรื่องง่ายมากที่คุณต้องให้ก่อนอื่นคุณต้องให้ backgound เป็น rgb เนื่องจาก Internet Explorer 8 จะรองรับ rgb แทน rgba จากนั้นคุณต้องให้ความทึบเช่น filter:alpha(opacity=50);

background:rgb(0,0,0);
filter:alpha(opacity=50);

0

นี่เป็นโซลูชันความโปร่งใสสำหรับเบราว์เซอร์ส่วนใหญ่รวมถึง 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;
}

0

ทางออกที่ดีที่สุดที่ฉันพบคือสิ่งที่ 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;
}

0

หลังจากค้นหาเป็นจำนวนมากฉันพบวิธีแก้ปัญหาต่อไปนี้ซึ่งใช้ได้ผลในกรณีของฉัน:

.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 เราสามารถใช้เครื่องมือออนไลน์:

  1. https://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/
  2. http://web.archive.org/web/20131207234608/http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.