CSS3 HTML5使用 RGBA 实现透明效果实例

　

　　目前，Web 设计中的透明效果主要靠 PNG 图片实现(但在 IE 浏览器支持得并不好 - 译者)，在 CSS3，可以直接实现透明效果。

　　rgba(200, 54, 54, 0.5);

　　background: rgba(200, 54, 54, 0.5);

　　color: rgba(200, 54, 54, 0.5);

　　color: #000;

　　opacity: 0.5;

　　支持的浏览器： Firefox, Safari, Chrome, Opera (opacity) 以及 IE7 (opacity, with fixes).

时间： 2024-09-17 04:07:31

CSS3 HTML5使用 RGBA 实现透明效果实例的相关文章

jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)_jquery

弹出层用来向用户展示详细的信息,交互性非常强.弹出层有对话框.模态窗口等形式,这里我都把他们叫做弹出层,我的同事们也是这么叫的.一般我们喜欢使用比较成熟的弹出层插件如fancybox等,但在本文,我将先抛弃插件,给大家介绍如何使用jQuery+CSS3+Html5实现弹出层. 效果展示        源码下载 我们完全使用HTML5+CSS3+jQuery来实现一个基本的弹出层效果,因此我们可以在示例中任意修改弹出层外观样式.甚至js方法调用.我们最终做出来的弹出层效果应该是响应式的,也就是说可

基于html5 canvas实现漫天飞雪效果实例

 本文实例讲述了基于html5 canvas实现漫天飞雪效果的方法,运行该实例可以看到很棒的下雪效果.如下图所示: 主要代码如下: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/T

css3+html5实现太阳系行星公转动画实例

模拟太阳系行情公转动画最终的效果图如下: css3的animation是通过关键帧的形式做出来的,首先设定一个动画的运行时间,然后在这个时间轴上的若干位置处插入关键帧,浏览器根据关键帧设定的内容做过渡动画.animation一般结合transform属性进行制作.以一个简单的例子说明,以一个div,让其从左到右运动,如下图左所未(需要点下图片播放) 先用css画出静态的图,然后再加动画的属性.整个工程完整的代码见这个Demo.html如下: <div class='space'>     &l

CSS3 HTML5块阴影与文字阴影实例

阴影效果曾让 Web 设计师既爱又恨,现在,有了 CSS3,你不再需要 Photoshop,已经有网站在使用这个功能了,如 24 Ways website. -webkit-box-shadow: 10px 10px 25px #ccc; -moz-box-shadow: 10px 10px 25px #ccc; box-shadow: 10px 10px 25px #ccc; 前两个属性设置阴影的 X / Y 位移,这里分别是 10px,第3个属性定义阴影的虚化程度,最后一个设置阴影的颜色.文

css3透明效果和圆角问题

问题描述 有没有一种方法让所有浏览器技能兼容透明效果又能圆角的?我尝试了几种方式发现这两种效果不能同时让所有浏览器同时兼容,请教高手 解决方案 解决方案二:ie8及以下不支持圆角不知道你说的透明是什么?png透明还是阿尔法透明?ie支持gif透明和阿尔法透明(需要滤镜支持)解决方案三:透明效果:css3支持的透明效果如:rgba(1551551550.3)此方式也是ie9以下不支持但是可以使用css2Opacity:0.3;此时如果使用了这种方式css3的圆角效果就消失了解决方案四:这是一款在线

CSS通过RGBa将一个元素设置为透明效果

 RGBa是一种在CSS中声明包含透明效果的颜色的方法,它的语法是这样的: 代码如下: div { background: rgba(200, 54, 54, 0.5); } 它允许我们为元素添加透明色.或许我们习惯了使用"opacity",它很简单易用,但是,opacity会使所有的子元素都变成透明的,而且很难去解决这个问题.(除非使用怪异的定位hack) 跨浏览器透明同样颇为棘手. 通过RGBa,我们可以将一个元素设置为透明,而不会影响其子元素:   声明一个保留颜色 并非所有的浏

JavaScript+html5 canvas制作的百花齐放效果完整实例_javascript技巧

本文实例讲述了JavaScript+html5 canvas制作的百花齐放效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; padding:0; } #canvas { border:5px solid gra

JS+CSS3制作炫酷的弹窗效果_javascript技巧

昨天在家看电视时,退出的时候发现了一个弹窗效果,整个背景模糊,觉得这样的效果好炫,要比纯色加透明度高大上好多,连续试了几个界面,最终确定效果由css实现的,于是今天一大早来到公司便赶紧搜索了一下,虽然兼容性奇差,但是一个css属性就可以搞定.瞬间感觉自己知道的真是太少了~~        首先回忆一下弹窗的实现,一般我们分为两层,弹出窗口层(popus)和遮罩层(mask),通常情况下我习惯就这两元素全部设成fixed定位,具体和absolute区别一试便知.对于mask层自不用多少,我们如下给

HTML5 实现橡皮擦的擦除效果

原文:HTML5 实现橡皮擦的擦除效果 声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 最近项目刚好用到这种效果,也就是有点像刮刮卡一样,在移动设备上,把某张图片刮掉显示出另一张图片.效果图如下:  DEMO请戳右:DEMO   这种在网上还是挺常见的,本来就想直接网上找个demo套用下他的方法就行了,套用了才发现,在android上卡出翔了,因为客户要求,在android不要求特别流畅,至少要能玩,但是网上找的那个demo实在太卡,根本就是没法玩的情况.于是就想自己写一个算了,本