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实现的下拉菜单效果示例
Jan 22 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
Jun 22 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
Sep 21 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
Apr 03 HTML / CSS
使用HTML5做个画图板的方法介绍
May 03 HTML / CSS
详解HTML5中的manifest缓存使用
Sep 09 HTML / CSS
浅析移动设备HTML5页面布局
Dec 01 HTML / CSS
HTML5之tabindex属性全面解析
Jul 07 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
Oct 26 HTML / CSS
浅谈HTML5中dialog元素尝鲜
Oct 15 HTML / CSS
详解webapp页面滚动卡顿的解决办法
Dec 26 HTML / CSS
CSS 鼠标选中文字后改变背景色的实现代码
May 21 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
使用Apache的rewrite技术
2006/06/22 PHP
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
php 获取客户端的真实ip
2009/11/30 PHP
简单的PHP留言本实例代码
2010/05/09 PHP
php中利用explode函数分割字符串到数组
2014/02/08 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
php的instanceof和判断闭包Closure操作示例
2020/01/26 PHP
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
2016/01/06 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
AngularJS中的指令全面解析(必看)
2016/05/20 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
微信小程序使用swiper组件实现类3D轮播图
2018/08/29 Javascript
python实现通过pil模块对图片格式进行转换的方法
2015/03/24 Python
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
python实现按长宽比缩放图片
2018/06/07 Python
Python后台开发Django会话控制的实现
2019/04/15 Python
Python中的引用和拷贝实例解析
2019/11/14 Python
Python创建数字列表的示例
2019/11/28 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
基于Python+QT的gui程序开发实现
2020/07/03 Python
浅析Python面向对象编程
2020/07/10 Python
matplotlib绘制鼠标的十字光标的实现(自定义方式,官方实例)
2021/01/10 Python
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
迎国庆演讲稿
2014/09/05 职场文书
运动会搞笑广播稿
2014/10/14 职场文书
MySQL基础(二)
2021/04/05 MySQL
pytorch fine-tune 预训练的模型操作
2021/06/03 Python
MySQL 聚合函数排序
2021/07/16 MySQL