编程 HTML / CSS

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复制内容到剪贴板

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>opacity</title>
<style type="text/css">
body {
margin:0;
padding:0;
}
div { position:absolute; }
.bg {
width:100%;
height:100%;
background:#000;
opacity:0.7;
filter:alpha(opacity=70);
}
.lightbox {
left:50px;
top:50px;
}
</style>
</head>
<body>
<div class="web"><img src="images/web_bg_9.jpg" width="1259" height="630" /></div>
<div class="bg"></div>
<div class="lightbox"><img src="images/web_bg_10.png" width="80%" /></div>
</body>

演示效果图：

CSS3不透明度实例讲解

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

CSS3不透明度实例讲解

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐

简单掌握CSS3将文字描边及填充文字颜色的方法

Mar 07 HTML / CSS

CSS3等相关属性制作分页导航实现代码

Dec 24 HTML / CSS

使用CSS3的背景渐变Text Gradient 创建文字颜色渐变

Aug 19 HTML / CSS

使用CSS Grid布局实现网格的流动

Dec 30 HTML / CSS

css3 border旋转时的动画应用

Jan 22 HTML / CSS

CSS3田字格列表的样式编写方法

Nov 22 HTML / CSS

CSS3实现王者荣耀匹配人员加载页面的方法

Apr 16 HTML / CSS

html5 css3网站菜单实现代码

Dec 23 HTML / CSS

极简的HTML5模版

Jul 09 HTML / CSS

Web时代变迁及html5与html4的区别

Jan 06 HTML / CSS

html5利用canvas实现颜色容差抠图功能

Dec 23 HTML / CSS

DIV CSS实现网页背景半透明效果

Dec 06 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格式化json函数示例代码

2016/05/12 PHP

Yii框架表单模型和验证用法

2016/05/20 PHP

JavaScript国旗变换效果代码

2008/08/13 Javascript

JavaScript 编写匿名函数的几种方法

2010/02/21 Javascript

jQuery 阴影插件代码分享

2012/01/09 Javascript

js onload事件不起作用示例分析

2013/10/09 Javascript

深入理解Javascript作用域与变量提升

2013/12/09 Javascript

nodejs教程之入门

2014/11/21 NodeJs

node.js中的fs.fchown方法使用说明

2014/12/16 Javascript

Javascript基础教程之函数对象和属性

2015/01/18 Javascript

jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码

2015/10/23 Javascript

JavaScript函数的一些注意要点小结及js匿名函数

2015/11/10 Javascript

小巧强大的jquery layer弹窗弹层插件

2015/12/06 Javascript

Angularjs过滤器使用详解

2016/05/25 Javascript

JavaScript实现打印星型金字塔功能实例分析

2017/09/27 Javascript

js判断文件类型大小并给出提示的实现方法

2018/01/03 Javascript

详解vue-cli中模拟数据的两种方法

2018/07/03 Javascript

基于node.js实现爬虫的讲解

2019/02/18 Javascript

node.js制作一个简单的登录拦截器

2020/02/10 Javascript

详解Vue.js3.0 组件是如何渲染为DOM的

2020/11/10 Javascript

JS实现鼠标移动拖尾

2020/12/27 Javascript

详解微信小程序（Taro）手动埋点和自动埋点的实现

2021/03/02 Javascript

Python实现Windows上气泡提醒效果的方法

2015/06/03 Python

python spyder中读取txt为图片的方法

2018/04/27 Python

python3实现网络爬虫之BeautifulSoup使用详解

2018/12/19 Python

python 发送json数据操作实例分析

2019/10/15 Python

Python定时任务APScheduler安装及使用解析

2020/08/07 Python

css3 条纹化和透明化表格Firefox下测试成功

2014/04/15 HTML / CSS

HTML5到底会有什么发展?HTML5的前景展望

2015/07/07 HTML / CSS

Bailey帽子官方商店：Bailey Hats

2018/09/25 全球购物

会计毕业生求职简历的自我评价

2013/10/20 职场文书

服装电子商务创业计划书

2014/01/30 职场文书

餐饮企业总经理岗位职责范文

2014/02/18 职场文书

六年级学生评语

2014/04/22 职场文书

邀请函模板

2015/02/02 职场文书

Java实现简单小画板

2022/06/10 Java/Android