html - 如何创建半透明的模糊叠加层？

问题描述

我有两个div。哪里div1有背景颜色和图像图案，并且div2覆盖有透明背景颜色，我希望div2背景是模糊的，但不是它的内容。

我研究了很多，但找不到类似的例子。

.container {
  width: 400px;
  height: 300px;
  background-color: #3d3d3d;
  position: relative;
  background-image: url('https://i.stack.imgur.com/Kpp7i.png');
  background-repeat: repeat;
  background-size: 50%;
}

.chat {
  color: green;
  line-height: 28px;
}

.type {
  width: 100%;
  height: 100px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: rgba(45, 45, 45, 0.45);
  color: rgba(255, 255, 255, 0.8);
  padding: 10px;
  box-sizing: border-box;
  line-height: 20px;
}

<div class="container">
  <div class="chat">
    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
    one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
    et Malorum" (The Extremes of Good and
  </div>
  <div class="type">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry'unchanged.
  </div>
</div>

像这样的东西：

标签： htmlcss

有很多文章涵盖了这一点，这里有一篇应该有效：

如何使 CSS 玻璃/模糊效果适用于叠加层？

设置您的图像。
创建一个将放置在上面的 div，这就是您的叠加层。
使用 rgba（a 设置不透明度），如下所示： background: rgba(34,34,34,0.75);

参考：

html - 如何创建半透明的模糊叠加层？

问题描述

解决方案

推荐阅读