css背景图片透明度-css透明背景兼容方案

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

CSS透明度是一项技术活动，因为涉及到IE8及以下版本不兼容opacity css3属性，以及filter:alpha(opacity=80)的值不兼容IE6。 网上比较流行的透明css是这样写的。

.transparent_class {
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
/* Good browsers */
opacity: 0.5;
}

更多的也可以看我这里写的。 这里我们使用整个图层的透明度。 当你使用前面的代码时，上面的文字和图片会变得透明css背景图片透明度，但有时我们需要知道背景颜色是透明的，或者背景图像是透明的。 1.背景颜色透明度是另一个兼容性问题。 IE8及以下不支持rgba（RGBA颜色值是RGB颜色值的扩展，带有一个alpha通道——它指定了对象的不透明度。）css背景图片透明度，下面的代码是网上比较流行的写法之一，支持IE系列浏览器，但高手的经验却很少使用。

.hex_color {
	filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#7FFF0000', endColorstr='#7FFF0000');
}
:root .hex_color {
	filter:none;	 /*处理IE9浏览器中的滤镜效果*/
	background:rgba(255,0,0,0.5);
}

2、透明背景图片我们都知道IE6下的透明背景图片会有默认的阴影。 有几种方法可以解决这个问题。 第一种：使用jsDD_belatedPNG来实现。 天猫和腾讯都没有使用这个插件，可能都是通过css来解决的。 第二种：将图片保存为png8格式。 我们都知道保存png8时会有一些阴影和锯齿效果。 今天在一篇文章中看到可以使用firework导入png8。 原文提到：在Fireworks中，必须使用导入的alpha透明png8，而不是保存alpha透明png8。 步：

 Fireworks >>文件>>导出向导

然后一步步往下，就会出现右边的界面，保存即可：

图标

使用这种保存方法解决了边缘粗糙的问题，这样就不会出现使用png8的硬边缘或使用png24的蓝色背景问题。 但是图片的半透明变成了全透明，所以如果图片是半透明的，并且需要保留半透明，那么我现在唯一的办法就是使用png24格式来使用IE6下的滤镜。 第三种方法：使用过滤器。

_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://a.xnimg.cn/xnapp/music/images/dot_2.png");
_background: none;

第四种：除了png8之外，使用gif和jpg也是另一种解决方案。 可以分离IE6及其他浏览器的两种不同图像格式，图像兼容。

【css透明背景兼容方案】相关文章：

1、前端工程师如何处理10万条数据

2.谁说后端不需要懂二进制

3.你不知道的斑点

4. JavaScript 开发者喜欢 Deno 的五个原因

5.Vue版本团队代码规范

6.见Earn！重读vue2.0风格手册，我整理了那些关键规则

7. 实现Vue自定义指令的延迟加载

8、四年后端带你了解路由懒加载原理