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编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
Jan 07 HTML / CSS
详解css position 5种不同的值的用法
Jul 30 HTML / CSS
CSS3实现缺角矩形,折角矩形以及缺角边框
Dec 20 HTML / CSS
解决img标签上下出现间隙的方法
Dec 14 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
Mar 14 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
Mar 10 HTML / CSS
HTML5中FileReader接口使用方法实例详解
Aug 26 HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
Jan 30 HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
Apr 22 HTML / CSS
HTML5微信播放全屏问题的解决方法
Mar 09 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
Sep 17 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
May 08 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中Cookie与Session的异同
2016/02/19 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
IE下写xml文件的两种方式(fso/saveAs)
2013/08/05 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
javascript实现下雪效果【实例代码】
2016/05/03 Javascript
JS清除字符串中重复值的实现方法
2016/08/03 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
微信小程序上传图片功能(附后端代码)
2020/06/19 Javascript
Vue中在新窗口打开页面及Vue-router的使用
2018/06/13 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
React和Vue中监听变量变化的方法
2018/11/14 Javascript
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
Python实现二维数组输出为图片
2018/04/03 Python
python生成ppt的方法
2018/06/07 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
Python多线程编程之多线程加锁操作示例
2018/09/06 Python
python dict 相同key 合并value的实例
2019/01/21 Python
浅谈Scrapy网络爬虫框架的工作原理和数据采集
2019/02/07 Python
用Python配平化学方程式的方法
2019/07/20 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
新加坡网上美容店:Hermo新加坡
2019/06/19 全球购物
金智子午JAVA面试题
2015/09/04 面试题
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
体育专业自荐书
2014/05/29 职场文书
大学生实习证明范本
2014/09/19 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
物业工程部经理岗位职责
2015/04/09 职场文书
2015年电话客服工作总结
2015/05/18 职场文书