添加新的div时背景图像的不透明度增加

Question

我正在分配聊天机器人，并将背景图片opacity设置为0.02。

但是，当我输入更多消息时，opacity一直增加到1。

这很酷，但我从不打算这样做。

就像这样：

我该如何阻止？

单击Send按钮时，以下代码将追加到<div id="chatbox">中：

<div class="userDiv"><p class="userText"><span>' + rawText + '</span></p></div>

我尝试将<div class="userDiv">的不透明度设置为0.02，与背景图片的不透明度相同，但是后来我看不到我的消息。

我找不到与此问题有关的任何答案。

谢谢。

Jsfiddle：http://jsfiddle.net/qn7yhrds/9/

Answer 1

感谢@Temani Afif

，我设法解决了这个问题

由以下代码引起的问题：

div::after {
  content: "";
  background: url("https://cdn.pixabay.com/photo/2014/08/07/15/20/newspaper-412452_960_720.jpg");
  opacity: 0.02;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}

我将所有div定义为具有背景图像。

因此，每次我添加一个新的div时，都会在先前的背景图像之上添加一个新的背景图像堆栈，从而导致不透明度增加。

解决方案：http://jsfiddle.net/Lvx5dowp/4/