使线性模糊对卡片做出反应

Posted 2023-03-06

【中文标题】使线性模糊对卡片做出反应

【英文标题】：Make linear blur react on card

【发布时间】：2021-12-12 15:46:00

【问题描述】：

我正在尝试这样做：

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

【问题讨论】：

请提供足够的代码，以便其他人更好地理解或重现问题。

【参考方案1】：

在你想要的元素上，添加一个叠加层。

.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%);

【讨论】：

没关系！但是我可以在文本中添加这个吗？

将此添加到包含文本的 div 中。

【参考方案2】：

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