一、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只对只对绝对.固定.相对定位的元 ...

随机推荐

SSIS 属性：ExecValueVariable
有些Task组件执行完成之后,会产生输出结果,称作Execution Value,例如,Execute SQL Task在执行完成之后,会返回受影响的数据行数.Task组件的Execution Val ...
网站就必须用响应式布局吗？MVC视图展现模式之移动布局
本文先引入给读者一个自己研究的机会,下次深入说明一下: 废话不多说,直接上图新建一个mvc的项目在视图里面添加一个移动端视图正常访问一下 Bootstrap自带的响应式的方式(页面代码并没有改变 ...
ASP.NET MVC5+EF6+EasyUI 后台管理系统（49）-工作流设计-我的申请
系列目录提交一个表单后我们需要一个管理的列表.我的申请,我的申请包含了提交内容的列表状态状态分:过期,未审核,审核通过,驳回,废弃列表对应代码 @using App.Admin; @using ...
从零开始编写自己的C#框架（22）——添加普通列表页面
普通列表页面指的是上一章那种有层次感列表以外的正常列表页面,由于上一章已讲解了正常添加页面的相关操作了,所以部分相关的操作本章节就不再罗嗦重复一次了.大家可以试试先用本章内容中的一些简单介绍,自己使用 ...
Reactor by Example--转
原文地址:https://www.infoq.com/articles/reactor-by-example Key takeaways Reactor is a reactive streams l ...
读书笔记--SQL必知必会16--更新和删除数据
16.1 更新数据使用UPDATE语句更新或修改表中的数据.必须有足够的安全权限. 更新表中的特定行更新表中的所有行使用UPDATE时一定要细心,不要省略WHERE子句. SET命令用来将新值赋 ...
SQL Server 执行计划利用统计信息对数据行的预估原理二（为什么复合索引列顺序会影响到执行计划对数据行的预估）
本文出处:http://www.cnblogs.com/wy123/p/6008477.html 关于统计信息对数据行数做预估,之前写过对非相关列(单独或者单独的索引列)进行预估时候的算法,参考这里. ...
docker对数据卷容器进行备份
转载请注明出处官网的数据以及各大博客都没有对这个的具体说明,本人也是理解了好久. 我们使用docker的过程中,使用共享的数据卷是经常的,那么.我们要怎么进行备份呢? 首先,我们得了解下面4个命 ...
[JavaEE笔记]Cookie
引言由于 Http 是一种无状态的协议,服务器单从网络连接上无从知道客户身份. 会话跟踪是 Web 程序中常用的技术,用来跟踪用户的整个会话.常用会话跟踪技术是 Cookie 与 Session. ...
Oracle 中的操作符
1.union:对两个结果集进行并集操作,不包括重复行,同时进行默认规则的排序: SELECT * FROM emp WHERE sal < UNION SELECT * FROM emp WH ...

不透明度opacity进阶