CSS3不透明度实例讲解


Posted in HTML / CSS onApril 26, 2016

如何设置透明度?定义opacity属性,通过设置该属性能够使任何元素呈现出半透明效果,opacity属性的基本语法如下:

<alphavalue>|inherit

取值说明:

1、<alphavalue>|是由浮点数和单位标识符组成的长度值。不可为负值,默认值为1.opacity取值为1时,则元素为完全不透明的;反之,取值为0时,元素是完全透明的,不可见。

2、inherit表示继承,即继承父元素的不透明性。

3、针对IE浏览器,可以使用它的私有属性filter来兼容:filter:alpha(alpha=value);。

实例:设计灯箱广告背景布

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>opacity</title>  
  6. <style type="text/css">  
  7. body {   
  8.     margin:0;   
  9.     padding:0;   
  10. }   
  11. div { position:absolute; }   
  12. .bg {   
  13.     width:100%;   
  14.     height:100%;   
  15.     background:#000;   
  16.     opacity:0.7;   
  17.     filter:alpha(opacity=70);   
  18. }   
  19. .lightbox {   
  20.     left:50px;   
  21.     top:50px;   
  22. }   
  23. </style>  
  24. </head>  
  25.   
  26. <body>  
  27. <div class="web"><img src="images/web_bg_9.jpg" width="1259" height="630" /></div>  
  28. <div class="bg"></div>  
  29. <div class="lightbox"><img src="images/web_bg_10.png" width="80%" /></div>  
  30. </body>  

演示效果图:

CSS3不透明度实例讲解

以上就是本文的全部内容,希望对大家的学习有所帮助。

HTML / CSS 相关文章推荐
css3动画效果抖动解决方法
Sep 03 HTML / CSS
css3中transition属性详解
Sep 02 HTML / CSS
利用css3实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
实例讲解使用CSS实现多边框和透明边框的方法
Sep 08 HTML / CSS
css3边框_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3制作轮播图的一种方法
Nov 11 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
Jun 03 HTML / CSS
详解HTML5常用的语义化标签
Sep 27 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
Apr 14 HTML / CSS
移动端HTML5开发神器之vconsole详解
Dec 15 HTML / CSS
CSS3 制作的图片滚动效果
Apr 14 HTML / CSS
HTTP中的Content-type详解
Jan 18 HTML / CSS
CSS3弹性盒模型开发笔记(二)
Apr 26 #HTML / CSS
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
Apr 26 #HTML / CSS
纯CSS3代码实现文字描边
Apr 25 #HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 #HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
Apr 21 #HTML / CSS
CSS3绘制超炫的上下起伏波动进度加载动画
Apr 21 #HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 #HTML / CSS
You might like
php 文章调用类代码
2011/08/11 PHP
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
php读取EXCEL文件 php excelreader读取excel文件
2012/12/06 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
验证坐标在某坐标区域内php代码
2016/10/08 PHP
微信封装的调用微信签名包的类库
2017/06/08 PHP
JavaScript 常用函数库详解
2009/10/21 Javascript
js select option对象小结
2013/12/20 Javascript
学习JavaScript设计模式之迭代器模式
2016/01/19 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
vue2 中如何实现动态表单增删改查实例
2017/06/09 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
python多线程抓取天涯帖子内容示例
2014/04/03 Python
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
python 3.5实现检测路由器流量并写入txt的方法实例
2017/12/17 Python
python实现读Excel写入.txt的方法
2018/04/29 Python
Python调用C++,通过Pybind11制作Python接口
2018/10/16 Python
Python循环中else,break和continue的用法实例详解
2019/07/11 Python
将pycharm配置为matlab或者spyder的用法说明
2020/06/08 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
python 实现图片裁剪小工具
2021/02/02 Python
45个非常奇妙的CSS3 特性应用示例
2012/01/01 HTML / CSS
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
美国经典刺绣和字母儿童服装特卖:Smocked Auctions
2018/07/16 全球购物
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
资深生产主管自我评价
2013/09/22 职场文书
土地租赁意向书
2014/07/30 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
主婚人致辞精选
2015/07/28 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
python geopandas读取、创建shapefile文件的方法
2021/06/29 Python