CSS3教程(8):CSS3透明度指南


Posted in HTML / CSS onApril 02, 2009

CSS3透明…不透明…渐变…随便你怎么叫它吧!这里是一些使用CSS3透明度的指南以及一些例子。
CSS3透明…不透明…渐变…随便你怎么叫它吧!这里是一些使用CSS3透明度的指南以及一些例子。
其实这个firefox很久以前就支持了,而IE一直不支持!
上一篇文章:CSS3教程(7):CSS3嵌入字体
“opacity”声明用来设置一个元素的透明度:层、文字、图片等…一个opacity的值为1的元素是完全不透明的,反之,值为0是完全透明的,看不见的。1到0之间的任何值都表示该元素的透明程度。
浏览器兼容性
opacity是浏览器支持最好的一个CSS3元素…当然,除了IE! CSS3透明(例1:层)
CSS3教程(8):CSS3透明度指南
上面的透明例子使用了下面的样式:
div.opacityL1 { background:#036; opacity:0.2; width:575px; height:20px; } div.opacityL2 { background:#036; opacity:0.4; width:575px; height:20px; } div.opacityL3 { background:#036; opacity:0.6; width:575px; height:20px; } div.opacityL4 { background:#036; opacity:0.8; width:575px; height:20px; } div.opacityL5 { background:#036; opacity:1.0; width:575px; height:20px; }
浏览器支持:

  • Firefox(3.05 …)
  • Google Chrome(1.0.154 …)
  • Google Chrome(2.0.156 …)
  • Internet Explorer(IE7, IE8 RC1 )
  • Opera(9.6 …)
  • Safari(3.2.1 windows…) CSS 3 透明(例2:图片)
    CSS3教程(8):CSS3透明度指南
    我们也可以在图片上使用不同透明度的透明效果,就像上面的示例一样。一个很酷的应用是将opacity应用到:hover上,实现一种链接的鼠标经过效果。
    img.opacity1 { opacity:0.25; width:150px; height:100px; } img.opacity2 { opacity:0.50; width:150px; height:100px; } img.opacity3 { opacity:0.75; width:150px; height:100px; }
    浏览器支持:
    • Firefox(3.05 …)
    • Google Chrome(1.0.154 …)
    • Google Chrome(2.0.156 …)
    • Internet Explorer(IE7, IE8 RC1 )
    • Opera(9.6 …)
    • Safari(3.2.1 windows…)
HTML / CSS 相关文章推荐
CSS3动画之利用requestAnimationFrame触发重新播放功能
Sep 11 HTML / CSS
CSS3教程(1):什么是CSS3
Apr 02 HTML / CSS
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
纯css3实现效果超级炫的checkbox复选框和radio单选框
Sep 01 HTML / CSS
html5+css3之CSS中的布局与Header的实现
Nov 21 HTML / CSS
css3的focus-within选择器的使用
May 11 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
div或img图片高度随宽度自适应的方法
Feb 06 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
Apr 29 HTML / CSS
canvas 绘图时位置偏离的问题解决
Sep 16 HTML / CSS
纯html+css实现奥运五环的示例代码
Aug 02 HTML / CSS
CSS使用SVG实现动态分布的圆环发散路径动画
Dec 24 HTML / CSS
CSS3教程(10):CSS3 HSL声明设置颜色
Apr 02 #HTML / CSS
CSS3教程(9):设置RGB颜色
Apr 02 #HTML / CSS
CSS教程:CSS3圆角属性
Apr 02 #HTML / CSS
CSS3的新特性介绍
Oct 31 #HTML / CSS
CSS3属性选择符介绍
Oct 17 #HTML / CSS
CSS3教程:background-clip和background-origin
Oct 17 #HTML / CSS
细说CSS3中的选择符
Oct 17 #HTML / CSS
You might like
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
初识PHP中的Swoole
2016/04/05 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
2013/11/06 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
js实现可键盘控制的简单抽奖程序
2016/07/13 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
2016/08/05 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
vue.js中proxyTable 转发请求的实现方法
2018/09/20 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
微信小程序按钮点击跳转页面详解
2019/05/06 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
JavaScript实现拖动对话框效果的实现代码
2020/10/12 Javascript
Python批量修改文本文件内容的方法
2016/04/29 Python
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
python学生信息管理系统(完整版)
2020/04/05 Python
解决Python二维数组赋值问题
2019/11/28 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
python实现scrapy爬虫每天定时抓取数据的示例代码
2021/01/27 Python
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
泰国王权免税店官方网站:KingPower
2019/03/11 全球购物
如何写毕业求职自荐信
2013/11/06 职场文书
美工的岗位职责
2013/11/14 职场文书
团员的自我评价
2013/12/01 职场文书
大学毕业自我评价
2014/02/02 职场文书
小学英语课后反思
2014/04/26 职场文书
市级优秀班主任事迹材料
2014/05/13 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android