Question

我写了这段代码

.container {
  width: 200px;
  height: 200px;
  position: relative;
  display: inline-block;
  background: #E7E7E7;
}

.overlay {
  position: absolute;
  opacity: 0;
  transition: all .3s ease;
  background: red;
}

.container:hover .overlay {
  opacity: .3;
}

.overlay-top {
  width: 200px;
  height: 0;
}

.container:hover .overlay-top {
  height: 200px;
}

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div class="container ">
    <div class="overlay overlay-top">
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quisquam mollitia, explicabo, a animi earum vel et quidem consequatur facere asperiores alias dignissimos expedita dicta iusto tempora similique? Sit, vitae?</p>
    </div>
  </div>
</body>

</html>

即使我打开文本的样式并将段落的不透明度设置为1，我也不能更改文本的不透明度而不更改背景的不透明度有人可以帮助我吗？

Answer 1

您不能仅通过不透明度来达到此条件，您需要将背景色修改为RGBA，然后将整个叠加层的不透明度保持为1。我刚刚从代码中更改了2个属性。

create

.container {
  width: 200px;
  height: 200px;
  position: relative;
  display: inline-block;
  background: #E7E7E7;
}

.overlay {
  position: absolute;
  opacity: 0;
  transition: all .3s ease;
  background: rgba(255, 0, 0, 0.3);
}

.container:hover .overlay {
  opacity: 1;
}


.overlay-top {
  width: 200px;
  height: 0;
}

.container:hover .overlay-top {
  height: 200px;
}

如何在不更改背景不透明度的情况下更改某些文本的不透明度

1 个答案: