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

让背景透明,听上去不是挺容易的么? 让背景色透明,很容易想到opacity,要兼容IE的话只要加上filter:alpha(opacity=?)就行了,OK,看看这个例子. html: <div class="container" id="container"> <div class="main" id="main"> <label for="tel">电话:</l

今天有看到司徒正美<背景半透明rgba最佳实践>的文章和里面推荐的一个在线工具CSS背景颜色属性值转换  . 于是联系到自己的less库,新技能Get. 内容如下: /*在你的less库中加入以下代码*/ //rgba创建兼容IE的rgba #rgba(@r,@g,@b,@a){ @c: rgba(@r,@g,@b,@a); @c2 :argb(@c); /* for IE9 IE8 IE7 not sure about IE6*/ filter:~"progid:DXImageTr

by 一丝 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>背景半透明rgba最佳实践</title> <style> </style> </head> <body> <div class="main"> <div class="demo demo1

1.说明 此色彩模式与RGB相同,只是在RGB模式上新增了Alpha透明度. RGBA(R,G,B,A) 2.取值 R: 红色值,正整数值的取值范围为:0 - 255,百分数值的取值范围为:0.0% - 100.0%. G: 绿色值,正整数值的取值范围为:0 - 255,百分数值的取值范围为:0.0% - 100.0%. B: 蓝色值,正整数值的取值范围为:0 - 255,百分数值的取值范围为:0.0% - 100.0%. A: Alpha透明度.取值0~1之间. 3.示例 rgba <ul>

RGBA 语法 R:红色值.正整数 | 百分数 G:绿色值.正整数 | 百分数 B:蓝色值.正整数| 百分数 A:透明度.取值0~1之间 为什么要用RGBA而不用opacity 因为在项目中需要用到一个半透明的蒙版而并不想要蒙版上的字体,也就是透明层的子元素继承透明的样式,这是就需要用到rgba,方便完美的解决了这个问题

在rgba之前,我们应该知道rgb.它就是红色R+绿色G+蓝色B.那rgba是什么?简单的说就是在rgb的基础之上加上一个通道alpha.他的语法如下: r    红色值.正整数(0~255) | 百分数 g   绿色值.正整数 (0~255)| 百分数 b   蓝色值.正整数 (0~255)| 百分数 a   透明度.取值0~1之间 这里只是进行简单的认识. 从图中可以看到圈出的部分就是a(透明度)为0.3时的效果. 这个是为1时的效果.

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

rgba语法: rgba(0, 0, 0,0.5); 第一个参数:R 红色(0-255) 第二个参数:G 绿色(0-255) 第三个参数:B 蓝色(0-255) 第四个参数:透明度(0-1)使用rgba指定颜色的好处是:任何位置的颜色,使用rgba指定,都可以通过设置第四个参数来调整透明度.不仅仅可以设置背景色的透明度.使用rgba指定背景透明和使用opacity指定背景颜色的透明度的区别: 1.使用opacity指定背景颜色的透明度时,其内容也一起被设置透明度,导致内容模糊.如果不想内容模糊,

复制粘贴: <!DOCTYPE html > <html > <head> <meta charset="utf-8"> <title>标题</title> <script type="text/javascript" src="../js/jquery-1.4.min.js"></script><style type="text/cs

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

这个属性的兼容问题比较简单,IE8已经支持这个属性,IE6和IE7也可以通过hack支持.RGBA和CSS2里的RBG属性差不多,只是RGBA属性多了一个透明度的定义,CSS3标准里对RGBA属性的解释如下: 1 2 3 4 5 /* 基本语法 */em { color: Rgba(red,green,blue,opacity) }/* 举例 */em { color: rgba(255,0,0,1) } /* 红色,不透明 */em { color: rgba(100%,0%,0%,1) } 

在CSS3中有rgba属性,可以很方便的实现背景透明,但对于IE家族来说却不是那么容易实现: FireFox.chrome.opera.safari 凡是对支持CSS3且支持W3标准的浏览器都可以现实的,比如safari,chrome的webkit核心的浏览器.firefox的Gecko内核.opera的Presto内核(最近传说转向webkit内核): 格式:background:rgba(255, 0, 0, 0.5); background:rgba([red:0~255], [green

之前项目中遇到纯色的半透明背景,都是这么干: <style> .box {width:300px;height:300px;position:relative;} .mask {width:300px;height:300px;position:absolute;z-index:;background-color:#;opacity:);} .content {width:300px;height:300px;position:absolute;z-index:;} </style>

最近遇到一个需求,要在图片上显示带有半透明背景的文字,效果如下图所示: 看到这个需求之后,第一反应是使用CSS3中的opacity设置元素的透明度. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init

半透明部分设置样式:opacity:0.7在ie9/ie10/ff/chrome/opera/safari显示正常. 但是这样在ie6-ie8中是不支持的,需要加上下面这句话: filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70); 这里的opacity是百分比的 opacity表示透明度,默认的范围是从0 到 100,他们其实是百分比的形式.也就是说,0代表完全透明,100代表完全不透明. 上面解决了透明度的问题.接下来,解决r

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

在过去,我们都是使用图片或者JavaScript来实现漂亮的按钮效果,随着越来越多的浏览器对CSS3的支持和完善,使用CSS3来实现美观的按钮已没有太多的障碍.今天,本文收集了12个很不错的CSS3按钮方案并有相关的使用教程. BonBon Buttons Zardi CSS3 Buttons With Simple Markup Fancy Buttons 10 Nice CSS3 Buttons CSS3 Animated Bubble Buttons Super Awesome Butto

不谈IE,只谈谈box-shadow的具体使用方法 语法: E {box-shadow: <length> <length> <length>?<length>?||<color>} 也就是: E {box-shadow:inset x-offset y-offset blur-radius spread-radius color} 换句说: 对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜

看到text-shadow这句代码,眼尖的同学是不是觉得很熟悉?没错,前面我们已经学习过<css3基础教程五边框box-shadow>,而且这两者非常相近,只要以前的课程学好了,text-shadow就非常容易了. text-shadow可以用来设置文本的阴影效果. 语法: text-shadow: X-Offset Y-Offset blur color; X-Offset:表示阴影的水平偏移距离,其值为正值时阴影向右偏移,反之向左偏移: Y-Offset:是指阴影的垂直偏移距离,如果其值是