Moo*_*oon 110 css internet-explorer-8 rgba
我使用这个CSS作为背景不透明度<div>:
background: rgba(255, 255, 255, 0.3);
它在Firefox中运行良好,但在IE 8中运行不正常.如何使其工作？
dia*_*o13 241
在IE中模拟RGBA和HSLA背景,你可以使用渐变滤镜,具有相同的开始和结束颜色(alpha通道是HEX值中的第一对)
background: rgba(255, 255, 255, 0.3); /* browsers */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */
Mat*_*Cat 73
创建一个大于1x1像素的png(感谢thirtydot),它与背景的透明度相匹配.
编辑:为了回退IE6 +支持,您可以为png指定bkgd块,如果不支持,这是一种将替换真正的alpha透明度的颜色.你可以用gimp修复它,例如.
ahg*_*ood 14
我相信这是最好的,因为在这个页面上有一个工具来帮助你生成alpha透明背景:
http://hammerspace.co.uk/2011/10/cross-browser-alpha-transparent-background-css
#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
我知道它可能不是每个人的完美解决方案,但在某些情况下值得考虑,因为它节省了大量时间并且完美无缺.希望能帮到别人!
CSS中大多数浏览器都支持RGBa代码,但只有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,这本身可能会导致问题.