CSS3中的opacity属性使用教程


Posted in HTML / CSS onAugust 19, 2015

RGBA和opacity

语法:

R:红色值。正整数 | 百分数

G:绿色值。正整数 | 百分数

B:蓝色值。正整数| 百分数

A:透明度。取值0~1之间

CSS Code复制内容到剪贴板
  1. /* IE6 - 8 */  
  2. filter: alpha(opacity=80);   
  3. /* 其他 */  
  4. opacity: 0.8;  

CSS3中的opacity属性使用教程

RGBA比元素设置CSS的透明度更好,因为单独的颜色可以在不影响整个元素的透明度,他不会影响到元素其他的属性,比如说边框,字体同时也不会影响到其他元素的相关透明度。

opacity的使用

opacity声明用来设置一个元素的透明度:层、文字、图片等…一个opacity的值为1的元素是完全不透明的,反之,值为0是完全透明的,看不见的。1到0之间的任何值都表示该元素的透明程度。

浏览器兼容性

opacity是浏览器支持最好的一个CSS3元素…当然,除了IE!
CSS3透明(例1:层)
CSS3中的opacity属性使用教程

上面的透明例子使用了下面的样式:

CSS Code复制内容到剪贴板
  1. div.opacityL1 { background:#036; opacity:0.2; width:575pxheight:20px; }     
  2. div.opacityL2 { background:#036; opacity:0.4; width:575pxheight:20px; }     
  3. div.opacityL3 { background:#036; opacity:0.6; width:575pxheight:20px; }     
  4. div.opacityL4 { background:#036; opacity:0.8; width:575pxheight:20px; }     
  5. div.opacityL5 { background:#036; opacity:1.0; width:575pxheight:20px; }    

浏览器支持:

    Firefox 3.05+
    Google Chrome 1.0+
    Internet Explorer 8-
    Opera 9.6+
    Safari 3.2.1+

CSS 3 透明(例2:图片)
CSS3中的opacity属性使用教程

我们也可以在图片上使用不同透明度的透明效果,就像上面的示例一样。一个很酷的应用是将opacity应用到:hover上,实现一种链接的鼠标经过效果。

CSS Code复制内容到剪贴板
  1. img.opacity1 { opacity:0.25; width:150pxheight:100px; }     
  2. img.opacity2 { opacity:0.50; width:150pxheight:100px; }     
  3. img.opacity3 { opacity:0.75; width:150pxheight:100px; }    

浏览器支持:

    Firefox 3.05+
    Google Chrome 1.0.154+
    Internet Explorer IE8-
    Opera 9.6+
    Safari 3.2.1+

HTML / CSS 相关文章推荐
CSS3圆角和渐变2种常用功能详解
Jan 06 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
Grid 宫格常用布局的实现
Jan 10 HTML / CSS
HTML5语音识别标签写法附图
Nov 18 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
Jun 23 HTML / CSS
HTML5进度条特效
Dec 18 HTML / CSS
HTML5 Canvas中绘制矩形实例
Jan 01 HTML / CSS
字中字效果的实现【html5实例】
May 03 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
Jun 27 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
Mar 07 HTML / CSS
Html5应用程序缓存(Cache manifest)
Jun 04 HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
Dec 24 HTML / CSS
实例讲解CSS3中的border-radius属性
Aug 18 #HTML / CSS
详解CSS3中使用gradient实现渐变效果的方法
Aug 18 #HTML / CSS
全方位了解CSS3的Regions扩展
Aug 07 #HTML / CSS
CSS3中Animation属性的使用详解
Aug 06 #HTML / CSS
利用CSS3的transition属性实现滑动效果
Aug 05 #HTML / CSS
详解CSS3中@media的实际使用
Aug 04 #HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
Aug 04 #HTML / CSS
You might like
做个自己站内搜索引擎
2006/10/09 PHP
php中生成随机密码的自定义函数代码
2013/10/21 PHP
PHP 7.0.2 正式版发布
2016/01/08 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
通过复制Table生成word和excel的javascript代码
2014/01/20 Javascript
30个经典的jQuery代码开发技巧
2014/12/15 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
javascript绘制漂亮的心型线效果完整实例
2016/02/02 Javascript
JS中的二叉树遍历详解
2016/03/18 Javascript
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
从零开始搭建一个react项目开发
2018/02/09 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
2018/06/13 Javascript
JavaScript实现表单注册、表单验证、运算符功能
2018/10/15 Javascript
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
vue-router 按需加载 component: () => import() 报错的解决
2020/09/22 Javascript
如何实现小程序与小程序之间的跳转
2020/11/04 Javascript
理解python正则表达式
2016/01/15 Python
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
详解如何用django实现redirect的几种方法总结
2018/11/22 Python
Selenium常见异常解析及解决方案示范
2020/04/10 Python
django下创建多个app并设置urls方法
2020/08/02 Python
django跳转页面传参的实现
2020/09/17 Python
html5-canvas中使用clip抠出一个区域的示例代码
2018/05/25 HTML / CSS
英国婴儿产品专家:Samuel Johnston
2020/04/20 全球购物
九州传奇上机题
2014/07/10 面试题
机械电子工程专业推荐信范文
2013/11/20 职场文书
硕士研究生个人求职信
2013/12/04 职场文书
培训协议书范本
2014/04/22 职场文书
党支部特色活动方案
2014/08/20 职场文书
奥巴马经典演讲稿
2014/09/13 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
结婚喜宴迎宾词
2015/08/10 职场文书