CSS3 -- 透明色(rgba)

1、rgba 描述

  rgb:红r、绿g、蓝b

  rgba:红r、绿g、蓝b、透明度Alpha

  取值:

    r、g、b值:正整数(0 ~ 255) | 百分数( 0.0% ~ 100.0%);(超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。)

    a透明度值:取值0~1之间;(不可为负)

2、rgba 兼容

3、rgba 用法

  rgba:制作透明色(透明背景色、透明边框色、透明前景色等),

  opacity:在CSS2中制作背景色通常用到,但用它制作边框色或前景色的话,则存在问题。

  在CSS2中 兼容 写法:

/* IE5 - 7 */
filter: alpha(opacity=80);
/* IE 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
/* Everyone else */
opacity: 0.8;

  CSS3中 兼容写法:

background: rgb(0,0,0); /*The Fallback color,这里也可以使用一张图片来代替*/
background: rgba(0, 0, 0,0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000,endColorstr=#80000000)"; /*Filter for IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000, endColorstr=#80000000); /*Filter for older IEs */
时间: 2024-08-03 04:48:12

CSS3 -- 透明色(rgba)的相关文章

CSS3 之 RGBa 可透明颜色

在 CSS3 中,增加了一个 opacity 属性,允许开发者设置元素的透明度,现在 opacity 已被主流的现代浏览器支持,但 opacity 会把被设置的元素及其子元素同时设置为同一个透明度,这样的透明规则相当不灵活,在实际开发中往往也是会遇到很多麻烦.其实,在 CSS3 中还有另外一套颜色透明解决方案 —— RGBa .相对于 opacity ,RGBa 可以在单个元素上设置透明度,而不影响其子元素,只是 RGBa 的浏览器支持度并没有 opacity 的广泛,因此相对较少引起开发者注意

css3基础 rgba 背景半透明 简单示例

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

Css3颜色值RGBA得表示方式

RGBA(R,G,B,A) 取值 R:红色值.正整数 | 百分数 G:绿色值.正整数 | 百分数 B:蓝色值.正整数 | 百分数 A:Alpha透明度.取值0~1之间. 说明: RGBA记法. 此色彩模式与RGB相同,只是在RGB模式上新增了Alpha透明度. ie6-8版本不支持.其他版本支持.其他浏览器支持

CSS3 rgba用法

CSS 中的颜色有三种定义方式:使用颜色方法(RGB.RGBA.HSL.HSLA),十六进制颜色值和预定义的颜色名称. RGBA 是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha(不透明度)三个单词的缩写.RGBA 颜色值是 RGB 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度. 基本语法: R:红色值.正整数 (0~255) G:绿色值.正整数 (0~255) B:蓝色值.正整数(0~255) A:透明度.取值0~1之间 浏览器的兼容性: RGB

CSS3 RGBA

前面我们一起探讨了一下CSS3 Gradient(css3 渐变),今天我们一起来探讨一下CSS3中的RGBA.RGB对于大家来说一点不陌生,他就是红色R+绿色G+蓝色B,那现在我们所说的RGBA又是什么呢?说得简单一点就是在RGB的基础上加进了一个通道Alpha.从而形成了我们今天需要讨论的RGBA.如果需要更详细的解说,大家就跟着我一起往下看吧. 语法: R:红色值.正整数 | 百分数 G:绿色值.正整数 | 百分数 B:蓝色值.正整数| 百分数 A:透明度.取值0~1之间 取值: <len

css3 animation之box-shaow

/*Typing Loader*/ div.typing {  width: 400px;  height: 300px;  margin: 20px auto 500px;  border: 2px #0f0 solid;  background: #000; } .typing_loader{ width: 6px; height: 6px; border-radius: 50%; -webkit-animation: typing 6s linear infinite alternate;

从天猫和支付宝身上学习opcity与rgba

不知道什么时候,一个双层透明的对话框悄然流行了起来. 我们在各大网站上都能见到类似这样的对话框: 这样的聚焦更明显,用户体验更好,也显得更加的高大上. 先说点题外话,这种布局如何用CSS+DIV去实现呢? 略微了解一点布局和CSS的人可能会给出这样的答案:(*下面这段布局是错误的) <div class="background-opacity"> <div class="panel-opacity"> <div>登录框内容<

HTML5和CSS3中的交互新特性

当文章的标题是一副用photoshop制作的图片,那么势必在搜索引擎中无法搜索到.并且因为图片的体积不算小.可能在网速慢的的时候不得不耐心的等待图片的刷新. 所以.我们来谈谈有没有一种新的方法能够避免这些缺点. 什么是HTML5和CSS3 HTML和CSS并不难理解.HTML为构成网页的主要语言.通过这样的语言.我们能够向计算机说明网页格式.内容.显示效果等等.而CSS则是专门用来控制网页显示效果的语言. HTML 5的新特性 1. 新的内容标签 HTML4中的内容标签级别同样,无法区分各部分内

HTML5 &amp; CSS3的新交互特性

本文标题的这副图片,是用Phosotshop制作的.但是,在搜索引擎中你却无法搜索到它,搜索引擎还没有强大到能够识别图片里面的文字.并且由于图片的体积不算太小,可能网速慢的网友在浏览的时候不得不耐心的等待图片的刷新.那么,有没有一种新的方法可以避免这些缺点呢? 有的,HTML5和CSS3就可以满足你的需求.甚至,它可以做的更多,更好.作为一名设计师,我们应当了解它们是什么东西,有什么特性,从而进一步思考通过HTML5和CSS3我们能做些什么. 什么是HTML5和CSS3 HTML和CSS并不难理