透明渐变遮阳div

Question

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

Answer 1

这是面具的工作：

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

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

<div class="box">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.</div>

透明渐变遮阳div

Tranparent gradient to shade a div

css

gradient

linear-gradients