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+DIV实现漂亮的动画彩色标签
Jun 16 HTML / CSS
CSS3中文字镂空、透明值、阴影效果设置示例小结
Mar 07 HTML / CSS
CSS3系列之3D制作方法案例
Aug 14 HTML / CSS
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
Jun 15 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
HTML5 Canvas标签使用收录
Jul 07 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
Feb 28 HTML / CSS
HTML5通用接口详解
Jun 12 HTML / CSS
HTML最新标准HTML5总结(必看)
Jun 13 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
Jan 29 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
Jul 20 HTML / CSS
纯CSS如何禁止用户复制网页的内容
Nov 01 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
PHP与MySQL交互使用详解
2006/10/09 PHP
php实现专业获取网站SEO信息类实例
2015/04/02 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
JS 面向对象之神奇的prototype
2011/02/26 Javascript
jqgrid 简单学习笔记
2011/05/03 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
详解js模板引擎art template数组渲染的方法
2018/10/09 Javascript
Angular2 自定义表单验证器的实现方法
2018/12/14 Javascript
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
决策树的python实现方法
2014/11/18 Python
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
python重试装饰器的简单实现方法
2019/01/31 Python
学习python可以干什么
2019/02/26 Python
python使用递归的方式建立二叉树
2019/07/03 Python
python Django 创建应用过程图示详解
2019/07/29 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
2020/03/14 Python
jupyter notebook更换皮肤主题的实现
2021/01/07 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
史上最全面的Java面试题汇总!
2015/02/03 面试题
实习评语
2013/12/16 职场文书
大学四年职业生涯规划书范文
2014/01/02 职场文书
八项规定整改方案
2014/02/21 职场文书
优秀实习生感言
2014/03/01 职场文书
高中学生期末评语
2014/04/25 职场文书
社区工作者演讲稿
2014/05/23 职场文书
毕业论文指导教师评语
2014/12/30 职场文书