css 的rgba属性

CSS3里目前用的比较广的RGBA属性的高级使用方法。这个属性的兼容问题比较简单，IE8已经支持这个属性，IE6和IE7也可以通过hack支持。RGBA和CSS2里的RBG属性差不多，只是RGBA属性多了一个透明度的定义

【兼容：IE9】

RGBA的强大之处在于，通过对透明度的定义和不同层的颜色混合可以呈现出更多的颜色，就像颜料的混合一样。且不影响子节点

在IE8等古董级浏览器中是不支持的rgba的，IE8只能勉强支持rgb()函数（即去掉了透明度，只能表示颜色）。

所以在IE8中设置半透明就要费点脑子了。从大神那里得知可以使用IE的filter来解决这个问题，css代码如下：

Css代码收藏代码
background: rgba(255,255,255,0.1);
filter:progid:DXImageTransform.Microsoft.gradient(
startColorstr=#19ffffff,endColorstr=#19ffffff);

第二句话的意思就是当上一行的透明度不起作用的时候执行。这句话的意思本来是用来做渐变的。但是这个地方不需要渐变。所以两个颜色都设置成了相同的颜色。

注意，这个颜色“#19ffffff”是由两部分组成的。

第一部是#号后面的19 。是rgba透明度0.1的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。

第二部分是19后面的六位。这个是六进制的颜色值。要跟rgb函数中的取值相同。比如rgb(255,255,255)对应#ffffff；都是白色。

到这里，rgba的用法就可以兼容IE8了。

【拓展：】

CSS透明opacity和IE各版本透明度滤镜filter的最准确用法：

    （1）首先，Opacity属性用来设置一个元素的透明度，取值范围是0~1之间，不可为负值。opacity取值为1是完全不透明，取值为0是完全透明，视觉上看不见。关于浏览器对opacity属性的兼容性请继续往下看：（2）从Firefox3.5+不再支持私有属性-moz-opacity了，在Mozilla 1.7 (Firefox 0.9)之前FF都是使用这个私有属性的，Firefox 0.9-Firefox3同时支持-moz-opacity和opacity这两个属性，现在回想起刚入职场不久那时候，正好是Firefox升级到3.5之后，一些做好的页面透明效果突然没有了，如今已经CSS3铺天盖地，概叹时光荏苒啊。IE9+才开始支持CSS3 opacity，而对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代码收藏代码
/* 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);

因为IE4----IE9都支持滤镜写法

Css代码收藏代码
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
Css代码收藏代码

所以我们一般可以直接这样写，或者

Css代码收藏代码
filter:alpha(opacity=50); //filter 过滤器兼容IE678
其实效果一样。
使用中，我们可以根据要适配的浏览器/版本，从上面选择自己需要的代码行。如果要全面支持所有浏览器，至少需要有关opacity或filter的前5句。需要声明的是，如果你要同时使用filter和-ms-filter，请将-ms-filter写在filter的前面。原文描述如下：
If you want opacity to also work in IE8′s emulating IE7 mode, the order should be:翻译为（如果你想不透明也可以在IE8的模拟IE7模式下工作，顺序应该是：）
Css代码收藏代码
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; // first
filter: alpha(opacity=50); // second

IE 从4.0版开始，就提供了一些内置的多媒体滤镜特效，具体的使用方法是：

语法：filter : filter

参数：filter : 　要使用的滤镜效果。多个滤镜之间用空格隔开。

说明：

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

要使用该属性，对象必须具有height，width，position三个属性中的一个。

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

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

对应的脚本特性为filter。

种类：

IE4.0以上版本，支持以下14种滤镜：

滤镜名说明

Alpha（alfə）让HTML元件呈现出透明的渐进效果，常用于遮罩层

Blur 让HTML元件产生风吹模糊的效果

Chroma 让图像中的某一颜色变成透明色

DropShadow 让HTML元件有一个下落式的阴影

FlipH 让HTML元件水平翻转

FlipV 让HTML元件垂直翻转

Glow 在元件的周围产生光晕而模糊的效果

Gray 把一个彩色的图片变成黑白色

Invert 产生图片的照片底片的效果

Light 在HTML元件上放置一个光影

Mask 利用另一个HTML元件在另一个元件上产生图像的遮罩

Shadow 产生一个比较立体的阴影

Wave 让HTML元件产生水平或是垂直方向上的波浪变形

XRay 产生HTML元件的轮廓，就像是照X光一样

Alpha 滤镜参数详解

参数名说明取值说明

Opacity 不透明的程度，百分比。从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 坐标值

css 的rgba属性相关推荐

CSS常用背景属性（背景颜色、背景图片、背景平铺、背景位置、背景附着、背景色半透明、背景属性复合写法）
本博文记录CSS中比较常用的背景属性,包括背景颜色:background-color.背景图片:background-image.背景平铺:background-repeat.背景位置:backgro ...
CSS 动画相关属性动态实例大全（82种），2023年祝福第二弹（送你一只守护兔）(下），守护兔源代码免费下载
2023年春节祝福第二弹--送你一只守护兔(下) CSS 动画相关属性动态实例大全(82种).守护兔源代码免费下载本文目录: 五.CSS3 动画相关属性实例大全 (1).CSS3的动画基本属性 (2 ...
html设置表单透明度,css利用transparent属性设置透明度的方法
css利用transparent属性设置透明度的方法发布时间:2020-09-14 13:44:46 来源:亿速云阅读:188 作者:小新这篇文章主要介绍css利用transparent属性设置 ...
python全栈开发第二天（CSS简介，CSS常用的属性）
第二天 CSS简介什么是css css三种引入方式 css选择器引入方式的css优先级三种基本选择器的优先级关系选择器 css常用的属性 css颜色的表示方法背景属性字体属性边框属性内 ...
html边框白色实线rgba,CSS3 RGBA 属性高级用法
这个属性的兼容问题比较简单,IE8已经支持这个属性,IE6和IE7也可以通过hack支持.RGBA和CSS2里的RBG属性差不多,只是RGBA属性多了一个透明度的定义,CSS3标准里对RGBA属性的解 ...
overflow属性html5,什么是css中overflow属性
什么是css中overflow属性发布时间:2020-07-11 16:06:42 来源:亿速云阅读:192 作者:Leah 本篇文章给大家分享的是有关什么是css中overflow属性,小编觉得 ...
CSS基础样式属性设置
文章目录 css基础样式与属性设置一.宽和高二.字体属性 1. font-family:文字字体 2.font-size:字体大小 3.font-weight:文字粗细 4.font-style: ...
巧用CSS的Border属性
. 作者:冯永曜来源:黄山村夫制作过网页的人都有为画线而烦恼的经历,本文介绍的小技巧也许对你有所帮助.我们先来认识一下"Border"(画边框),它是CSS的一个属性,用它可以 ...
CSS中background-position属性
CSS中background属性是经常用到的,可以给某个块设置背景色.以下主要说明以下background-position属性的应用. 一般在设置background属性时的写法是: backgro ...
CSS中连接属性的排序
在CSS超链接的属性中,有四个连接方式: a:link a:hover a:visited a:acticve 之前在使用的时候一直是按照自认为的顺序中去写的,就是 L H V A的排序方式,然而有 ...

css 的rgba属性

css 的rgba属性相关推荐

最新文章

热门文章