blocks|key|898919|text|创建一个大于1x1像素的png+(感谢30点)，它与背景的透明度相匹配。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|898920|编辑:要回退到IE6%2B支持，您可以为png指定bkgd块，这是一种颜色，如果它不受支持，它将替换真正的alpha透明度。你可以用gimp来修复它。|898921|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

Create a png which is larger than 1x1 pixel (thanks thirtydot), and which matches the transparency of your background.

EDIT : to fall back for IE6+ support, you can specify bkgd chunk for the png, this is a color which will replace the true alpha transparency if it is not supported. You can fix it with gimp eg.

blocks|key|899146|text|要在IE中模拟RGBA和HSLA背景，可以使用具有相同开始和结束颜色的渐变滤镜(alpha通道是HEX值中的第一对)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|899147|background:+rgba(255,+255,+255,+0.3);+/*+browsers+*/
filter:+progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff',+endColorstr='#4cffffff');+/*+IE+*/|code-block|syntax|javascript|899148|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

To simulate RGBA and HSLA background in IE, you can use a gradient filter, with the same start and end color (alpha channel is the first pair in the value of HEX)
<pre><code>background: rgba(255, 255, 255, 0.3); /* browsers */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */
</code></pre>

blocks|key|899058|text|透明的png图像在IE+6中将不起作用，替代方案如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|899059|使用CSS：|899060|.transparent+{

++++/*+works+for+IE+5%2B.+*/
++++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;+
}|code-block|syntax|javascript|899061|或者直接使用jQuery：|899062|//+a+crossbrowser+solution
$(document).ready(function(){+
++++$(".transparent").css('opacity','.3');
});|899063|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

the transparent png image will not work in IE 6-, alternatives are:

with CSS:

<pre><code>.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; 
}
</code></pre>

or just do it with jQuery:

<pre><code>// a crossbrowser solution
$(document).ready(function(){ 
 $(".transparent").css('opacity','.3');
});
</code></pre>

blocks|key|1114003|text|虽然晚了，但我今天不得不使用它，找到了一个非常有用的php脚本here，它可以让你动态创建一个png文件，就像rgba的工作方式一样。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1114004|background:+url(rgba.php?r=255&g=100&b=0&a=50)+repeat;
background:+rgba(255,100,0,0.5);|code-block|syntax|javascript|1114005|该脚本可在此处下载：http://lea.verou.me/wp-content/uploads/2009/02/rgba.zip|1114006|我知道这可能不是每个人的完美解决方案，但在某些情况下它值得考虑，因为它节省了大量时间，并且工作得无懈可击。希望这对某些人有帮助！|1114007|entityMap|0|LINK|mutability|MUTABLE|url|http://lea.verou.me/2009/02/bulletproof-cross-browser-rgba-backgrounds/|1|http://lea.verou.me/wp-content/uploads/2009/02/rgba.zip^0|V|4|0|0|0|A|1J|1|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]]|C|$]]|$1|K|3|L|5|6|7|15|8|@]|9|@]|C|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]]]

Though late, I had to use that today and found a very useful php script <a href="http://lea.verou.me/2009/02/bulletproof-cross-browser-rgba-backgrounds/" rel="noreferrer">here</a> that will allow you to dynamically create a png file, much like the way rgba works.

<pre><code>background: url(rgba.php?r=255&amp;g=100&amp;b=0&amp;a=50) repeat;
background: rgba(255,100,0,0.5);
</code></pre>

The script can be downloaded here: <a href="http://lea.verou.me/wp-content/uploads/2009/02/rgba.zip" rel="noreferrer">http://lea.verou.me/wp-content/uploads/2009/02/rgba.zip</a>

I know it may not be the perfect solution for everybody, but it's worth considering in some cases, since it saves a lot of time and works flawlessly. Hope that helps somebody!

blocks|key|899403|text|几乎所有浏览器都支持CSS中的RGBa代码，但只有IE8及以下级别的浏览器不支持RGBa+css代码。对于这一点，这里是解决方案。对于解决方案，你必须遵循这段代码，最好遵循它的顺序，否则你不会得到你想要的完美输出。这段代码是由我使用的，它几乎是完美的。如果它是完美的，请发表评论。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|899404|.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);
+}|code-block|syntax|javascript|899405|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

There are mostly all browser support RGBa code in CSS but only IE8 and below level does not support RGBa css code. For This here is solution. For The solution you must follow this code and it’s better to go with it’s sequence otherwise you will not get perfect output as you wish. This code is used by me and it’s mostly perfect. make comment if it’s perfect.

<pre><code>.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);
 }
</code></pre>

blocks|key|1113717|text|您可以使用css来更改不透明度。要处理IE，你需要类似这样的东西：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1113718|.opaque+{
++++opacity+:+0.3;
++++-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
++++filter:+alpha(opacity=30);
}|code-block|syntax|javascript|1113719|但唯一的问题是，这意味着容器内的任何东西也将是0.3不透明度。因此，您必须更改您的HTML，使其具有另一个容器，而不是在透明的容器中保存您的内容。|1113720|否则，png技术将会起作用。除非你需要一个IE6的补丁，它本身可能会导致问题。|1113721|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

You use css to change the opacity. To cope with IE you'd need something like:

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

But the only problem with this is that it means anything inside the container will also be 0.3 opacity. Thus you'll have to change your HTML to have another container, not inside the transparent one, that holds your content.

Otherwise the png technique, would work. Except you'd need a fix for IE6, which in itself could cause problems.

blocks|key|1113948|text|我来晚了，但对于其他找到这篇文章的人来说--这篇文章非常有用：http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1113949|它使用渐变滤镜来显示纯色但透明的颜色。|1113950|entityMap|0|LINK|mutability|MUTABLE|url|http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/^0|V|1Q|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

I'm late to the party, but for anyone else who finds this - this article is very useful:
<a href="http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/" rel="nofollow">http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/</a>

It uses the gradient filter to display solid but transparent colour.

blocks|key|1114046|text|这对我解决IE8中的问题起到了作用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1114047|-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";|code-block|syntax|javascript|1114048|干杯|1114049|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

this worked for me to solve the problem in IE8:

<pre><code>-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
</code></pre>

Cheers

blocks|key|1114239|text|这个解决方案真的很有效，试试吧。在IE8中测试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1114240|.dash-overlay{+
+++-ms-filter:+"progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)";+
}|code-block|syntax|javascript|1114241|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This solution really works, try it. Tested in IE8

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

blocks|key|1114077|text|这很简单，首先你必须给背景rgb，因为Internet+Explorer8将支持rgb而不是rgba，然后你必须给不透明度，如filter:alpha(opacity=50);|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1114078|background:rgb(0,0,0);
filter:alpha(opacity=50);|code-block|syntax|javascript|1114079|entityMap^0|1R|P|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

It is very simply you have to give first you have to give backgound as rgb because Internet Explorer 8 will support rgb instead rgba and then u have to give opacity like <code>filter:alpha(opacity=50);</code>

<pre><code>background:rgb(0,0,0);
filter:alpha(opacity=50);
</code></pre>

blocks|key|1114133|text|这是包括IE+x在内的大多数浏览器的透明解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1114134|.transparent+{
++++/*+Required+for+IE+5,+6,+7+*/
++++/*+...or+something+to+trigger+hasLayout,+like+zoom:+1;+*/
++++width:+100%25;+

++++/*+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%2B,+Safari+2?,+Chrome+any?
++++/*+Opera+9%2B,+IE+9%2B+*/
++++opacity:+0.5;
}|code-block|syntax|javascript|1114135|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This a transparency solution for most browsers including IE x

<pre><code>.transparent {
 /* Required for IE 5, 6, 7 */
 /* ...or something to trigger hasLayout, like zoom: 1; */
 width: 100%; 

 /* Theoretically for IE 8 &amp; 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 &amp; 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;
}
</code></pre>

blocks|key|1114201|text|到目前为止，我发现的最好的解决方案是David+J+Marland在他的blog中提出的一个解决方案，以支持旧浏览器中的不透明(IE+6%2B)：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1114202|.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;
}|code-block|syntax|javascript|1114203|entityMap|0|LINK|mutability|MUTABLE|url|http://rland.me.uk/cross-browser-alpha-transparent-background-10-2011/^0|10|4|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

The best solution I found so far is the one proposed by David J Marland in his <a href="http://rland.me.uk/cross-browser-alpha-transparent-background-10-2011/" rel="nofollow">blog</a>, to support opacity in old browsers (IE 6+):

<pre><code>.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;
}
</code></pre>

I am using this CSS for background opacity of a <code>&lt;div&gt;</code>:

<pre><code>background: rgba(255, 255, 255, 0.3);
</code></pre>

It’s working fine in Firefox, but not in IE 8. How do I make it work?

CSS background opacity with rgba not working in IE 8

容器

jQuery

我正在使用这个CSS作为<div>的背景不透明度。background: rgba(255, 255, 255, 0.3);它在Firefox中工作得很好，但在IE8中就不行了。我怎么让它工作呢？

问rgba在IE 8中不起作用时的CSS背景不透明度
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问rgba在IE 8中不起作用时的CSS背景不透明度EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问rgba在IE 8中不起作用时的CSS背景不透明度
EN