透明渐变来塑造一个 div答案

【问题标题】：Tranparent gradient to shade a div透明渐变来塑造一个 div
【发布时间】：2021-11-21 02:05:28
【问题描述】：

我想给一个 div 加阴影，向用户展示他可以滚动查看 div 的其余内容。显然，唯一可用的解决方案是 linear-gradient 逐渐设置颜色，例如从不透明度为 1 的白色到不透明度为 0 的白色。但这就是问题所在：我的div 没有任何background-color。 div 位于背景图像（未附加到 div）前面。我想用线性阴影“掩盖” div，以便 div 逐渐消失。有没有 CSS 方法可以做到这一点？

【问题讨论】：

如果可能的话，你能分享一些参考吗？
您能否提供一些最小的代码，以便我们尝试一下。如果我们可以看到您的 HTML 结构和任何相关的 CSS，它会更容易提供帮助。请参阅 stackoverflow.com/help/minimal-reproducible-example 以获取有关如何执行此操作的帮助。
也许这会有所帮助：stackoverflow.com/questions/45849699/…
你可以使用伪元素:after。检查我的答案：stackoverflow.com/questions/45295942/…

标签： css gradient linear-gradients

【解决方案1】：

这是面具的工作：

.box {
  border:2px solid;
  width:200px;
  
  -webkit-mask:linear-gradient(#000,#0000);
}

body {
 background:linear-gradient(to right,pink,lightblue);
}

&lt;div class="box"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis velit non massa maximus egestas. Nam fermentum tortor feugiat dui imperdiet euismod. Cras non massa in magna dignissim tempus. Proin in molestie diam, a lacinia nunc. Sed non venenatis arcu.&lt;/div&gt;

【讨论】：