添加新的背景图像不透明度增加 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/

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

Background image opacity increase when adding new div

html

css

jquery

opacity