挑战CSS难点：解决子元素继承父元素opacity属性的技巧_css opacity不继承

作者：盐析白兔 | 2024-07-15 08:34:05

踩

css opacity不继承

前言

在进行网页布局时，我们经常会使用 opacity 属性来调整元素的透明度，但是这个属性会被子元素继承，导致不必要的麻烦。那么该如何解决这个问题呢？本文将为你提供可行的解决方案。

css 中的 opacity 属性相信大家都不陌生，它是一个设置不透明度的属性，取值区间在 [0.0 - 1]，代表从完全透明到完全不透明，默认值是 1，但是在使用 opacity 会有一个属性继承的问题，当父元素设置了 opacity 属性后，父元素下的所有子元素都会继承 opacity 属性。

解决方法：

方法1：background:rgba(0,0,0,0.5)

第一种方法很好理解，父元素在背景色上设置透明度时，直接使用 rgba 的格式即可；但若是父元素的背景色是渐变色时，这种方法就显得力不从心了，所以下面我们来看第二种方法。
方法1示例：

background: rgba(68, 102, 166, 0.6);
1

方法2：添加额外标签

上面我们说到子元素是会继承父元素的 opacity 属性，那我们直接不让它成为子元素，而是通过新增一个子元素的方式将其绝对定位定到父元素的位置，然后再在此元素上设置背景色与透明度就能将问题迎刃而解啦。

方法2示例：

<div class="outerBox">
  <!-- // 父级盒子 // -->
  <div class="fatherBox">
    <!-- // 内容盒子 // -->
    <div class="sonBox">我是内容</div>
  </div>
  <!-- // 要定位的盒子 // -->
  <div class="brotherBox"></div>
</div>
1
2
3
4
5
6
7
8
9

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>解决css中子元素继承父元素opacity属性的问题</title>
</head>

<body>
  <style>
    body {
      background: cornflowerblue;
    }

    /* 最外层盒子样式 */
    .outerBox {
      width: 300px;
      height: 300px;
      position: relative;
    }

    /* 父盒子样式 */
    .fatherBox {
      position: relative;
      z-index: 99;
    }

    /* 定位的盒子样式 */
    .brotherBox {
      background: linear-gradient(180deg, #ffffff 0%, #5582ff 30%, #2146ff 70%, #000831 100%);
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      z-index: 1;
      opacity: .18;
    }

    /* 内容样式 */
    .sonBox {
      color: white;
    }
  </style>
  <!-- 最外层的盒子 -->
  <div class="outerBox">
    <!-- 父级盒子 -->
    <div class="fatherBox">
      <!-- 内容盒子 -->
      <div class="sonBox">我是内容</div>
    </div>
    <!-- 要定位的盒子 -->
    <div class="brotherBox"></div>
  </div>

</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

实现效果：

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/828464