Javascript 浮动Div的淡出模糊效果

发布于04月03日

我正在渲染一个消息数组，我想在组件的底部为消息的其余部分制作一个模糊效果.到目前为止，我发现模糊效果应用于div的子对象.在这种情况下，我需要对div后面的任何东西应用模糊效果.

换句话说，我有一个浮动div，我希望它后面经过的所有东西都模糊不清.

下面是代码片段

<>
      <div
        ref={messagesContainerRef}
        className="w-full h-full flex flex-col rounded-xl overflow-auto relative"
      >
        {messages.map((message, index) => (
          <div
            key={message.id}
            className="w-full flex flex-col border-[1px] border-white/30 rounded-xl p-2 my-1"
          >
            <div className="w-full rounded-lg text-sm">{message.question}</div>
            <div className="w-full py-2 rounded-lg text-sm">{message.answer}</div>
          </div>
        ))}
      </div>
      <div
        className="absolute bottom-0 w-full h-16 blur-sm ">
      </div>
    </>
    ```

推荐答案

Blur a section of text using backdrop-filter

tailwind backdrop-blur可以用于模糊元素后面的内容.这也可以使用普通css和backdrop-filter来完成.

这对OP不起作用，因为背景位置不正确，应用了错误的类.通过在消息容器周围添加包装器、使背景作为最后一个子文件并应用正确的类，这些问题得到了修复.也可以使用一个::after伪元素来实现这一点，这将简化html(not shown).

运行代码段可以看到消息容器下部的文本模糊.

Code Snippet

html,
body {
  height: 100%;
}

/* css without Tailwind */

.messages-blur {
  position: absolute;
  width: 100%;
  height: 50%;
  bottom: 0;
  left: 0;
  backdrop-filter: blur(2px);
}

<!-- wrapper -->
<div class="relative">

<!-- messages container -->
<div class="w-full h-full flex flex-col rounded-xl overflow-auto">

<!-- message -->
  <div class="w-full flex flex-col border-1 border-white/30 rounded-xl p-2 my-1">
    <div class="w-full rounded-lg text-sm">
      Message Question 1
    </div>
    <div class="w-full py-2 rounded-lg text-sm">
      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
      animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime
    </div>

    <div class="w-full flex flex-col border-[1px] border-white/30 rounded-xl p-2 my-1">
      <div class="w-full rounded-lg text-sm">
        Message Question 2
      </div>
      <div class="w-full py-2 rounded-lg text-sm">
        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
        animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime
      </div>
    </div>
  </div>
</div>

  <!-- backdrop -->
  <div class="absolute top-1/2 left-0 bottom-0 w-full backdrop-blur-sm"></div>

</div>

<!-- Tailwind -->
<script src="https://cdn.tailwindcss.com"></script>