主页 / 问题 / 964859
Accepted
Natalya
Asked:2020-04-03 14:17:11 +0000 UTC2020-04-03 14:17:11 +0000 UTC

如果子元素大于父元素，则不显示自己的不透明度

  • 772

.parent {
  background-color: red;
  width: 200px;
  height: 200px;
  opacity: 0.3;
  position: relative;
}

.child {
  background-color: green;
  width: 100px;
  height: 100px;
  opacity: 1;
  z-index: 10;
  position: relative;
}
<div class="parent">
  <div class="child"></div>
</div>

属性：opacity: 1;对于子元素，浏览器似乎会忽略，而如果您设置，例如，0.2（小于父元素） - 显示。

https://jsfiddle.net/Nata_Hamster/w0vzb142/

css

1 个回答

  1. Best Answer

    用于rgba(n, n, n, n)背景颜色，而不是应用于opacity整个块和后代：

    .parent {
  background-color: rgba(255, 0, 0, 0.3);
  width: 200px;
  height: 200px;
  /* opacity: 0.3; */
  position: relative;
}

.child {
  background-color: rgba(0, 128, 0, 1);
  width: 100px;
  height: 100px;
  /* opacity: 1; */
  z-index: 10;
  position: relative;
}

body { background-image: url('https://isstatic.askoverflow.dev/m9NKc.png'); }
    <div class="parent">
  <div class="child"></div>
</div>

    • 2

相关问题