CSS3中如何解决子元素继承父元素的opacity属性[通俗易懂]

全栈程序员站长

发布于 2022-09-01 09:03:53

3.8K0

发布于 2022-09-01 09:03:53

文章被收录于专栏：全栈程序员必看全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

问题

css3中的opacity属性是用来设置 div 元素的不透明级别的，但是我们往往会遇到因为父级元素设定opacity后，子元素也跟着透明了，但是有时候我们只是想让背景是透明的，这该如何解决呢？

错误的示例

我们常常想到的方法是直接给子元素的opacity设定为1，如下：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>opacity</title>
</head>
<style type="text/css">
 .opacity{
  position: relative;
  width: 400px;
  height: 300px;
  color: black;
  background: red;
  opacity: 0.5;
  }
 .opacity-child{
  position: relative;
  opacity: 1;
 }
  .normal{
  width: 400px;
  height: 300px;
  background: red;
  color: black;
 }
 </style>
<body>
 <div class="opacity">
  <div class="opacity-child">子元素会继承父级元素的opacity属性</div>
</div>
 <div class="normal">子元素会继承父级元素的opacity属性</div>
</body>
</html>

这样我们得到的是无效的：

那我们应该如何解决呢？

解决方案

这里有两个方案，使用rgba()间接的设定opacity的值，这个属性不会向下继承，或者既然opacity会被子级元素继承，那就把opacity属性放到同级元素实现，下面通过示例具体说说这两种方式：

使用rgba()间接的设定opacity

rgba()有四个参数，最后一个参数就是opacity的值，和opacity单独设定效果一样，但是这个是有background属性来控制的，background不会向下继承，所以就解决这个问题啦，示例如下：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>opacity</title>
</head>
<style type="text/css">
 .opacity{
  position: relative;
  width: 400px;
  height: 300px;
  color: black;
  background: rgba(255,0,0,0.5);
 }
 .opacity-child{
 }
 .normal{
  width: 400px;
  height: 300px;
  background: red;
  color: black;
 }
 </style>
<body>
 <div class="opacity">
  <div class="opacity-child">子元素会继承父级元素的opacity属性</div>
 </div>
 <div class="normal">子元素会继承父级元素的opacity属性</div>
</body>
</html>

效果如下：