使线性模糊在卡片上产生反应

Question

我正在尝试这样做：

但我找不到如何在 css 或 React 中为卡片制作线性模糊..

Answer 1

使用 background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%, white 100%); 在您想要此效果的 div 上。

Answer 2

在您想要的元素上添加叠加层。

.element:after {
  content: "";
  display: block;
  width: 100%;
  height: 200px;
  position: absolute;
  bottom: 0;
  pointer-events: none;
  background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%, white 100%);
}