css 背景图透明-CSS透明不透明滤镜和透明滤镜滤镜在IE各版本中最准确的用法

bendan520 2023年8月26日 css 0

CSS3的透明度属性opacity想必大家都用过。 至于如何对不支持CSS3的浏览器进行透明处理，并且保持浏览器的效果一致，这个恐怕谁都会写，但是很多人不太清楚filter的具体句子含义以及两者的区别措辞的不同版本。 ，之前问过群里很多大牛css 背景图透明，都不是很准确，网上的说法更是五花八门。 今天主要目的就是重温一下这个属性，并实际测试一下，以说明正确的写法，以及各个版本IE的支持和写法的区别。

首先，Opacity属性用于设置元素的透明度，值范围在0到1之间，并且不能为负数。 不透明度值为 1 时完全不透明，值为 0 时完全透明且在视觉上不可见。 请继续阅读有关浏览器对 opacity 属性的兼容性：

Firefox 3.5+ 不再支持私有属性 -moz-opacity。 在Mozilla 1.7（Firefox 0.9）之前，FF使用了这个私有属性。 Firefox 0.9-Firefox3 同时支持-moz-opacity 和opacity。 现在回想起刚进入职场的时候css 背景图透明，Firefox刚升级到3.5后，一些制作精良的页面的透明效果突然消失了。 现在CSS3势不可挡，感叹时间过得真快。

IE9+才开始支持CSS3不透明度，但是对于IE6-IE8我们习惯使用filter过滤属性来实现。 IE4-IE9均支持滤镜编写方法progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)。

IE8引入了一个特殊的-ms-filter。 IE认为这些措辞是对旧措辞的修正，更符合规范。 这个写法的属性值只是一对破折号，效果和之前一样。 不过这种写法的寿命并不长，IE10已经不再支持filter和-ms-filter。

Safari 1.2之前的版本是基于khtml的浏览器内核。 1.2版本发布后，不再支持-khtml-opacity的写法，-khtml-opacity也迅速成为历史。

Konqueror 从未支持 -khtml-opacity，并且从 4.0 版本开始支持 opacity。

除了IE之外，目前主流浏览器Opera 9.0+、Safari 1.2(WebKit 125)+、chrome等都支持opacity这个透明度属性。

IE从4.0版本开始提供了一些外部多媒体滤镜效果。 具体使用方法为：

语法：

透明背景图片素材_透明背景图片是什么格式_css 背景图透明

过滤器： 过滤器

范围：

filter ：要使用的滤镜效果。 用空格分隔多个过滤器。

阐明：

设置或检索应用于对象的滤镜的效果。

要使用此属性，对象必须具有高度、宽度和位置三个属性之一。

过滤机制是可扩展的。 可以开发和使用第三方过滤器。

此属性在 MAC 平台上不可用。

对应的脚本功能是filter。

透明背景图片素材_css 背景图透明_透明背景图片是什么格式

IE4.0以上支持以下14种过滤器：

过滤器名称说明

Alpha使HTML设备呈现透明渐进效果

Blur使HTML组件形成风吹模糊效果

色度使图像中的某种颜色透明

DropShadow 使 HTML 设备具有投影

FlipH 水平翻转 HTML 设备

FlipV 垂直翻转 HTML 设备

发光在设备周围产生光晕和模糊效果

透明背景图片是什么格式_css 背景图透明_透明背景图片素材

灰色将彩色图片变成黑白图片

反转形成图片的照片负片的效果

Light 在 HTML 设备上放置光影

蒙版 在另一个 HTML 设备的帮助下在另一个设备上形成图像的笔划

阴影形成更加立体的阴影

Wave使HTML组件在水平或垂直方向形成波浪变体

XRay 形成 HTML 设备的轮廓，就像 X 射线一样

Alpha滤波器参数解读

参数名称说明 数值说明

不透明度 不透明度的程度，百分比。 从0到100，0表示完全透明，100表示​​完全不透明。

FinishOpacity 这是与 Opacity 一起使用的可选参数。 当Opacity和FinishOpacity同时使用时，可以产生透明渐变的效果，很酷。 从0到100，0表示完全透明，100表示​​完全不透明。

Style 当 Opacity 和 finishOpacity 都设置形成透明渐变时，主要使用红色来指定渐进显示形状。 0：无渐进； 1：线性渐进； 2：循环渐进； 3：矩形径向。

StartX 渐进起点的 X 坐标值

StartY 渐进开始的 Y 坐标值

FinishX 渐进结束的 X 坐标值

FinishY 渐进结束的 Y 坐标值

下面是一个反例，测试filter和opacity的兼容性：

网页代码

透明背景图片是什么格式_透明背景图片素材_css 背景图透明





JS Bin


  
测试透明度

注意：测试时不要忘记写上DOCTYPE，否则会偏离真实效果。

对应的CSS代码：

.transparent_class {
    /* Required for IE 5, 6, 7 */
    /* ...or something to trigger hasLayout, like zoom: 1; */
    width:300px;
    height:300px;
    line-height:300px;
    text-align:center;
    background:#000;
    color:#fff;
    /* older safari/Chrome browsers */
    -webkit-opacity: 0.5;
    /* Netscape and Older than Firefox 0.9 */
    -moz-opacity: 0.5;
    /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/
    -khtml-opacity: 0.5;
    /* IE9 + etc...modern browsers */
    opacity: .5;
    /* IE 4-9 */
    filter:alpha(opacity=50);
    /*This works in IE 8 & 9 too*/
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    /*IE4-IE9*/
    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
}

在使用时，我们可以根据要适配的浏览器/版本从中选择我们需要的代码行。 如果你想完全支持所有浏览器，你至少需要前5句关于不透明度或过滤器的内容。

需要声明的是，如果要同时使用filter和-ms-filter，请在filter后面写上-ms-filter。 原文描述如下：

如果你想让不透明度也能在 IE8 的模拟 IE7 模式下工作，顺序应该是：

-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; // first
filter: alpha(opacity=50); // second

如果您不使用此顺序，则模拟 IE7 的 IE8 不会应用不透明度，但本机 IE8 和 IE7 会应用不透明度。

基于统计的CSS属性支持可以参考caniuse网站

参考文献：CSS opacity%2Fopacity简介