不透明度opacity进阶
一、opacity属性
1、opacity
习惯上说“透明度”，其实应该叫“不透明度”。opacity 意思：不透明，而背景色的默认值：transparent意思才是“透明的”。所以opacity用来设置不透明度，取值从[0.0~1.0]，代表从完全透明到完全不透明，0.0就和transparent一样了，看不到但是实实在在存在。
默认值：1，完全不透明。
Inherited:默认继承。所以给父元素设置opacity时，所有子元素也会继承opacity属性。
<style>
div{
background-color: red;
}
.opacity{
opacity: 0.5;
}
</style>
---------------------------
<div>
文本和背景色都受到不透明度级别的影响。
</div>
<br/>
<div class="opacity">
文本和背景色都受到不透明度级别的影响。
</div>
所有浏览器都支持opacity属性，IE8及更早的版本支持替代的filter属性。
filter:alpha(opacity=number)，中number取值[0~100],0完全透明，100不透明。
所以为兼容可写为：
.opacity{
opacity: 0.5;
filter:alpha(opacity=50);
}
2、子元素设置opacity
父元素设置opacity，子元素也设置opacity，在IE下子元素设置的opacity不起作用，在ff和Chrome下，子元素最终的opacity=父元素opacity*子元素opacity。
这样就可以解释为什么父元素设置了不透明度后，子元素设置不透明度为1【即完全不透明】但不生效了。
例子：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>透明度by starof</title>
<style>
div{
background-color: red;
}
.opacity{
opacity: 0.5;
}
.sonOpacity{
opacity: 0.3;
}
</style>
<body>
<div>
<p>不设置opacity效果<p>
</div>
<div class="opacity">
<p>父元素(div)设置opacity:0.5效果</p>
</div>
<div class="opacity">
<p class="sonOpacity">父元素(div)设置opacity:0.5，同时子元素（p）设置opacity:0.3效果</p>
</div>
</body>
</html>
3、效果展示
1、半透明背景效果
可以做出下面效果：
<!DOCTYPE html>
<html>
<head>
<title>b.html</title>
<meta charset="UTF-8">
<style>
.background{
width: 400px;
height: 250px;
margin:15px;
background:url(img/wl.jpg) no-repeat;
border: 1px solid red;
}
.opacity{
width: 350px;
height: 204px;
margin:20px;
padding:0;
background-color: #ffffff;
border: 1px solid black;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}
P{
margin: 30px 40px;
line-height:1.5;
}
</style>
</head>
<body>
<div class="background">
<div class="opacity">
<p>一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字</p>
</div>
</div> </body>
</html>
2、父元素和子元素同时设置opacity，在ff和chrome下子元素opacity为父元素opacity*子元素opacity【update20161124】
去掉背景色，只看文字效果更明显。
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>透明度by starof</title>
<style>
.opacity{
opacity: 0.5;
}
.sonOpacity{
opacity: 0.5;
}
.sonOpacity2{
opacity: 0.25;
}
</style>
<body>
<div>
<p>不设置opacity效果<p>
</div>
<div class="opacity">
<p>父元素(div)设置opacity:0.5效果</p>
</div>
<div class="opacity">
<p class="sonOpacity">父元素(div)设置opacity:0.5，同时子元素（p）设置opacity:0.5效果</p>
</div> <div>
<p class="sonOpacity2">父元素(div)不设置opacity，子元素（p）设置opacity:0.25效果，和上面的文字透明度一样</p>
</div>
</body>
</html>
二、opacity和rgba模式对比
语法：rgba(r,g,b,a)，【R:red,G:green,B:blue,A:alpha】
前三个参数为rgb数值，取值[0~255]，最后一个参数代表透明度，取值[0~1]。
background-color: rgba(255,0,0,0.5);
看一个opacity和rgba对比的例子：
<style type="text/css">
div{
display: inline-block;
width: 200px;
height: 100px;
text-align: center;
font-size: 20px;
}
.opacity{
background-color: rgb(255,0,0);
opacity: 0.5;
}
.rgba{
background-color: rgba(255,0,0,0.5);
}
</style>
----------------------------------------------
<body >
<div class="opacity">
<p>opacity效果</p>
</div>
<div class="rgba">
<p>transparent效果</p>
</div>
</body>
三、浏览器支持
可通过这里查看
http://caniuse.com/#search=opacity
本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/5443445.html有问题欢迎与我讨论，共同进步。
不透明度opacity进阶的更多相关文章
- 4_jquery
官网:www.jquery.com 兼容: 1.jquery-3.1.0.js :form.attr("checked","false")无效 2.firefo ...
- HTML5的实用
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC"; color: #ffffff } p.p2 ...
- html5快速入门（二）—— CSS简介
前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...
- cocos2d-x之 利用富文本控件解析xhml标签（文字标签，图片标签，换行标签，标签属性）
执行后效果: 前端使用: 后台SuperRichText解析code void SuperRichText::renderNode(tinyxml2::XMLNode *node){ while (n ...
- HTML5和CSS3基础教程(第8版）-读书笔记(3)
第11章 用CSS 进行布局 网站设计主要有两大类型:固定宽度和响应式. 对于固定(fixed)布局,整个页面和每一栏都有基于像素的宽度.顾名思义,无论是使用移动电话和平板电脑等较小的设备查看页面,还 ...
- jQuery学习小结2——动画
一.基础动画 方法名 说明 show([speed,[easing],[fn]])hide([speed,[easing],[fn]]) speed:三种预定速度之一的字符串("slow&q ...
- CSS中filter滤镜学习笔记
1．CSS静态滤镜样式 (filter)(只有IE4.0以上支持) CSS静态滤镜样式的使用方法:{ filter : filtername( parameters1, parameters2, . ...
- CSS3笔记
CSS/CSS3在线手册:http://www.css119.com/book/css/ CSS3实现水平垂直居中:http://bbs.html5cn.org/thread-87300-1-1. ...
- 《HTML5与CSS3基础教程》学习笔记 ——Three Day
第十一章 1. box-sizing:border-box(让宽度和高度包含内边距和边框) 2. clear让后面的元素显示在浮动元素的后面 3. z-index只对只对绝对.固定.相对定位的元 ...
随机推荐
- IIS访问共享文件详解
前言 公司同事做了一个报表系统,需要做集群部署,本来是一件挺容易的事,但是部署过程中却遇到啦种种蛋疼问题. 问题1.我们的报表使用的是微软的水晶报表,需要上传报表的配置文件,然后水晶报表提供的控件来读 ...
- ElasticSearch 5学习(8)——分布式文档存储（wait_for_active_shards新参数分析）
学完ES分布式集群的工作原理以及一些基本的将数据放入索引然后检索它们的所有方法,我们可以继续学习在分布式系统中,每个分片的文档是被如何索引和查询的. 路由 首先,我们需要明白,文档和分片之间是如何匹配 ...
- 基於tiny4412的Linux內核移植--- 中斷和GPIO學習（3）
作者 彭東林 pengdonglin137@163.com 平臺 tiny4412 ADK Linux-4.4.4 u-boot使用的U-Boot 2010.12,是友善自帶的,爲支持設備樹和uIma ...
- FFmpeg学习4：音频格式转换
前段时间,在学习试用FFmpeg播放音频的时候总是有杂音,网上的很多教程是基于之前版本的FFmpeg的,而新的FFmepg3中audio增加了平面(planar)格式,而SDL播放音频是不支持平面格式 ...
- 一个简单的webservice的demo（下）winform异步调用webservice
绕了一大圈,又开始接触winform的项目来了,虽然很小吧.写一个winform的异步调用webservice的demo,还是简单的. 一个简单的Webservice的demo,简单模拟服务 一个简单 ...
- php内核分析（三）－全局变量
这里阅读的php版本为PHP-7.1.0 RC3,阅读代码的平台为linux CG CG是从全局的compiler_global中获取属性值,里面存储的就是编译过程使用到的全局变量. struct _ ...
- Hadoop学习之旅一：Hello Hadoop
开篇概述 随着计算机网络基础设施的完善,社交网络和电商的发展以及物连网的推进,产生了越来越多的大数据,使得人工智能最近几年也有了长足的发展(可供机器学习的样本数据量足够大了),大数据的存储和处理也越来 ...
- 阿里巴巴最新开源项目 - [HandyJSON] 在Swift中优雅地处理JSON
项目名称:HandyJSON 项目地址:https://github.com/alibaba/handyjson 背景 JSON是移动端开发常用的应用层数据交换协议.最常见的场景便是,客户端向服务端发 ...
- 在web浏览器上显示室内温度（nodeJs+arduino+socket.io）
上次的nodejs操作arduino入门篇中实现了如何连接arduino.这次我们来实现通过arduino测量室内温度并在浏览器上显示出来. [所需材料] 硬件:LM35温度传感器,arduino u ...
- 调用webservice进行身份验证
因为同事说在调用webservice的时候会弹出身份验证的窗口,直接调用会返回401,原因是站点部署的时候设置了身份验证(账号名称自己配置).因而在调用的时候需要加入身份验证的凭证. 至于如何获取身份 ...