Html 背景图像上的羽化div边

因此，我在div后面有一个带有滚动文本内容的图像滑块。我希望滚动文本div的边缘与它后面显示的内容一致，这样文本在滚动时就会很好地显示/消失

我尝试添加一个插入框阴影和线性渐变，但是当滚动文本有一个透明的背景时，你可以看到文本周围的阴影，逐渐变为黑色，而不是透明

这就是我所拥有的：

这就是我想要的：

我如何使用CSS呢

你不应该需要我的代码，因为它不是一个bug，但这里有一些

<style>
  #slider, #text, #text_overlay {
    position:absolute;
    width: 100%;
  }
  #slider {
    height: 350px;
  }
  #text, #text_overlay {
    top: 200px;
    height: 100px;
  }
  #text {
    z-index: 10;
  }
  #text_overlay {
    z-index: 20;
    background-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 3%, rgba(0,0,0,0) 97%, rgba(0,0,0,1) 100%);
  }
</style>
<div id="slider">
  <img src='https://www.w3schools.com/howto/img_fjords.jpg' />
</div>
<div id="text">Some text etc blah blah blah</div>
<div id="text_overlay"></div>

#滑块、#文本、#文本覆盖{
位置：绝对位置；
宽度：100%；
}
#滑块{
高度：350px；
}
#文本，#文本#覆盖{
顶部：200px；
高度：100px；
}
#正文{
z指数：10；
}
#文本覆盖{
z指数：20；
背景图像：线性梯度（向右，rgba（0,0,0,1）0%，rgba（0,0,0,0）3%，rgba（0,0,0,0）97%，rgba（0,0,0,1）100%）；
}
一些文字等等诸如此类的废话

使用-webkit mask image和渐变作为文本div上的掩码解决了此问题。不再需要文本覆盖div，并可用于更改背景：）

完整代码：

<style>
  #container {
    position:relative;
    height: 350px;
    width: 100%;
  }
  #slider, #text {
    position:absolute;
    width: 100%;
  }
  #slider {
    height: 100%;
  }
  #text {
    top: 200px;
    height: 100px;
    z-index: 10;
    -webkit-mask-image: linear-gradient(
      to right, /* gradient direction */
      rgba(0,0,0,0) 0%, /* transparent left 3% */
      rgba(0,0,0,1) 3%, /* visible in the middle start */
      rgba(0,0,0,1) 97%, /* visible in the middle end */ 
      rgba(0,0,0,0) 100% /* transparent right 3% */ 
    );
  }
</style>
<div id="container">
  <div id="slider">
    <img src='https://www.w3schools.com/howto/img_fjords.jpg' />
  </div>
  <div id="text">Some text etc blah blah blah</div>
</div>

#容器{
位置：相对位置；
高度：350px；
宽度：100%；
}
#滑块，#文本{
位置：绝对位置；
宽度：100%；
}
#滑块{
身高：100%；
}
#正文{
顶部：200px；
高度：100px；
z指数：10；
-webkit遮罩图像：线性渐变(
向右，/*渐变方向*/
rgba（0,0,0,0）0%，/*透明左3%*/
RGBA（0，0，0，1）3%，/*在中间开始可见*
RGBA（0，0，0，1）97%，/*可见于中端*/
rgba（0,0,0,0）100%/*透明右3%*/
);
}
一些文字等等诸如此类的废话

为什么这项提案被否决？

<style>
  #container {
    position:relative;
    height: 350px;
    width: 100%;
  }
  #slider, #text {
    position:absolute;
    width: 100%;
  }
  #slider {
    height: 100%;
  }
  #text {
    top: 200px;
    height: 100px;
    z-index: 10;
    -webkit-mask-image: linear-gradient(
      to right, /* gradient direction */
      rgba(0,0,0,0) 0%, /* transparent left 3% */
      rgba(0,0,0,1) 3%, /* visible in the middle start */
      rgba(0,0,0,1) 97%, /* visible in the middle end */ 
      rgba(0,0,0,0) 100% /* transparent right 3% */ 
    );
  }
</style>
<div id="container">
  <div id="slider">
    <img src='https://www.w3schools.com/howto/img_fjords.jpg' />
  </div>
  <div id="text">Some text etc blah blah blah</div>
</div>