某元素设置了opacity，覆盖在它上面的元素怎样不透明_opacity 子元素不透明_莫宛的博客

一、问题描述

如下：为27,28,29,30设置了 opacity:0.4; ，元素半透明展示。当元素上方的下拉框展示出来时，覆盖这一部分的下拉框也半透明了！
二、让下拉部分不透明的方法：

假设希望展示在顶层且不透明的是元素a，底部透明部分是元素b。
方法生效前提：元素a不能是元素b的子元素，即元素a，b不可以是嵌套结构。
第一步：让a元素脱离文档流，采用 position: absolute; 【属性为absolute、relative、fixed均可。但float不可以。】
第二步：设置a元素图层在最上方（大于b元素的z-index即可）， z-index: 10;
第三步：设置a元素背景为白色， background-color: #fff;
.a {
    position: absolute;
    background-color: #fff;
    z-index: 10;
实施后的效果：
 
通过基础代码复现（仿写日历的代码过于复杂，这里使用基础代码展示。重点代码部分在.top1{}中）
 
<!DOCTYPE html>
    <style>
      /* 半透明部分样式设置 */
      .opacity-bottom {
        position: relative;
        width: 200px;
        height: 200px;
        color: #fff;
        background-color: #1e80ff;
        opacity: 0.5;
        z-index: 1;
      #parent {
        position: relative;
      /* 设置展示在顶层的绿色方块 */
      .top1 {
        position: absolute;
        top: 22px;
        width: 80px;
        height: 80px;
        background-color: lightseagreen;
        z-index: 10;
      /* 设置展示在顶层的白色方块 */
      .top2 {
        position: fixed;
        top: 30px;
        left: 120px;
        width: 80px;
        height: 80px;
        color: #000;
        background-color: #fff;
        z-index: 10;
      /* 底部的颜色对照方块 */
      .normal-blue {
        float: left;
        width: 100px;
        height: 20px;
        background-color: #1e80ff;
      .normal-green {
        float: left;
        width: 100px;
        height: 20px;
        background-color: lightseagreen;
    </style>
  </head>
    <div id="parent">
      <div class="opacity-bottom">
        我是底部半透明部分 我是底部半透明部分 我是底部半透明部分
        我是底部半透明部分 我是底部半透明部分 我是底部半透明部分
        我是底部半透明部分 我是底部半透明部分 我是底部半透明部分
        我是底部半透明部分
      </div>
<!-- top1,top2不是半透明元素的子元素 -->
      <div class="top1">可以盖住可以盖住可以盖住可以盖住可以盖住</div>
      <div class="top2">可以盖住可以盖住</div>
      <div class="normal-blue"></div>
      <div class="normal-green"></div>
      正常黑色字
    </div>
  </body>
</html>
三、方法缺陷
 
当希望不透明的元素a，作为半透明元素b的子元素时，如上设置后，内容虽然可以覆盖底部元素b，元素a的背景色及文字还是会继承父元素的半透明性质。 
如下：浅蓝色部分设置了opacity:0.5;，浅绿色部分是浅蓝色部分的子元素，在设置了position: relative; background-color: lightseagreen;z-index: 10px;后，依然半透明。底部两个色块是蓝色和绿色不透明时的颜色。
  
<!DOCTYPE html>
    <style>
      .opacity-bottom {
        width: 200px;
        height: 200px;
        color: #fff;
        background-color: #1e80ff;
        opacity: 0.5;
      .top1 {
        position: relative;
        top: -30px;
        width: 80px;
        height: 80px;
        background-color: lightseagreen;
        z-index: 10px;
      .top2 {
        position: absolute;
        top: 20px;
        left: 100px;
        width: 80px;
        height: 80px;
        color: #000;
        background-color: #fff;
        z-index: 10px;
      .normal-blue {
        width: 100px;
        height: 20px;
        background-color: #1e80ff;
      .normal-green {
        width: 100px;
        height: 20px;
        background-color: lightseagreen;
    </style>
  </head>
    <div id="parent">
      <div class="opacity-bottom">
        我是底部半透明部分 我是底部半透明部分 我是底部半透明部分
        我是底部半透明部分 我是底部半透明部分 我是底部半透明部分
        我是底部半透明部分 我是底部半透明部分 我是底部半透明部分
        我是底部半透明部分
        <div class="top1">可以盖住可以盖住可以盖住可以盖住可以盖住</div>
        <div class="top2">可以盖住可以盖住</div>
      </div>
      <div class="normal-blue"></div>
      <div class="normal-green"></div>
      正常黑色字
    </div>
  </body>
</html>
两元素嵌套情况下的解决办法
 
如果仅希望背景半透明，且结构最好是父元素子元素嵌套，可以通过rgba()将父元素背景设置为半透明颜色background: raba(x1, x2, x3, y);
 其中： 
x1 x2 x3 取值是 0-255 之间的整数
y取值是0-1之间 (0，0.1，0.2， 0.3，0.4， 0.5，0.6，0.7，0.8，0.9，1) 
IE的话可以用滤镜，filter:alpha() 
四、参考链接
 
 解决方法来自百度日历，通过F12可以查看百度日历源代码
 
 仅设置背景半透明的参考链接： CSS常见问题解决002——opacity将子元素都变透明了https://blog.csdn.net/tongbiaos/article/details/52305538
 
                    一、问题描述 为某元素设置了opacity:0.4; 覆盖在它顶层的元素也半透明。 二、让下拉部分不透明的方法 position: absolute;background-color:#fff;z-index:10; 三、方法缺陷两元素嵌套情况下的解决办法 仅设置背景半透明，通过rgba()设置。
				在微信小程序中，自定义导航栏的颜色 可以在app.json.  window里面添加navigationBarBackgroundColor属性。
但是颜色只能为十六进制颜色码，不能使用rgb，或者rgba.。
为了满足更多用户的需求，微信官方给出了一个navigationStyle属性。
官方文档：navigationStyle 导航栏样式，仅支持 default/custom。custo...
				设置背景图片的透明度，并且该背景图片不随鼠标滚动而移动，我们可以使用滤镜filter中的透明度设置opacity
至于opacity的作用:转化图像的透明程度。值定义转换的比例：值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。
<body>里面不能直接设置图片的透明度，需要借助<div
				解决opacity继承与层叠冲突问题
在实现盒子透明但是文字不透明的过程中，遇到了很多问题，之前本以为自己解决了那个问题，但是看了css世界后，发现并没有那么简单，所以写篇博客来分享一下心得
先了解一下两种解决办法
利用background-color的rgba属性,a就代表了透明度
利用opacity属性
第一种方法只要找到了rgba分别代表上面就找到怎么解决了我这里只对第二种方法进行阐述
opacity概述
先来看看MDN官方解释:
opacity属性指定了一个元素的不透明度。换言之，opaci
				在PC端遇到了透明背景和透明图片的问题，其实以前也遇到过，只是没有总结起来，就忘记了，这次又撞墙了，必须记录下来，一来给自己做个小总结，提个醒，最近变懒了，再不努力就要倒挂了；二来是因为在网络上并没有完整的解决方案，希望可以帮助到遇到此类问题的朋友，今天主要讲解背景透明的解决方案，共勉~
重点内容入口：
IE6和部分IE7内核的浏览器会读懂rgbaIE专属滤镜
 filter:Alp
				我们在做PC端项目的时候，常常会碰到透明背景和透明图片的的需求，但是透明度常常有会发生很多问题，特别是背景透明内容不透明，想要兼容所有浏览器实现起来就比较麻烦。
如何实现背景透明，文字不透明，兼容所有浏览器？
其实平时说的调整透明度，其实是在样式中调整不透明度，如下图：
实现透明的css样式通常有以下3种方式，以下是不透明度都为50%的写法:
css3的opacity:value，value 的取值从 0 到 1，如opacity: 0.5
css3的rgba(red, green, blue, alp
				之前做了个半透明弹层，但设置背景半透明时，子元素包含的字体及其它元素也都变成了半透明。对opacity这个属性认识的不透彻，在这里做一些总结，方便以后使用。
背景透明，文字不透明的解决方法：
为元素添加一个绝对定位的子元素，设置大小和该元素一样，把半透明加在绝对定位元素上作为遮罩，z-index设置到最底部，达到背景半透明效果。
使用CSS3新属性rgba。
				要实现元素半透明，可以使用CSS中的opacity属性。将元素的opacity属性设置为0到1之间的值，0表示完全透明，1表示完全不透明。例如，将一个div元素的opacity属性设置为0.5，就可以实现半透明效果。
另外，还可以使用rgba颜色值来实现元素半透明。rgba颜色值由红、绿、蓝三个颜色通道和一个透明度通道组成，透明度通道的取值范围也是0到1之间。例如，将一个div元素的背景色设置为rgba(255, 0, 0, 0.5)，就可以实现背景色半透明的效果。