Answers:
创建一个大于1x1像素(感谢三十点)的png,它与背景的透明度匹配。
编辑:为了支持IE6 +,可以为png指定bkgd块,这是一种颜色,如果不支持,它将替换真正的alpha透明度。您可以使用gimp修复它。
1x1
:stackoverflow.com/questions/7764751/…–
要在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 */
我认为这是最好的,因为此页面上有一个工具可帮助您生成Alpha透明背景:
“ 跨浏览器Alpha透明背景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
?还是总是得到所有用户的请求,而只是不显示?
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的修复程序,否则它本身可能会引起问题。
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
这是大多数浏览器(包括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;
}
*重要:要从RGBA计算ARGB(用于IE),我们可以使用在线工具:
rgba()
颜色值不是在IE 8.支持