向上滚动后，如何使文本在图像下方消失？

Question

向上滚动后，是否可以在图片下方逐渐隐藏网站上的文字？仅使用 HTML 和 CSS?

这是我的 body 示例：

<img src="./image.gif">
<p> some text to scroll up... </p>
<p> more text to scroll up... </p>
<p> even more text to scroll up... </p>

Answer 1

img{
  position:fixed;
  top:0;
  left:0;
}
/* or like this */
#grad{
  position:fixed;
  left:300px;
  top:0px;
  height:150px;
  width:300px;
  z-index:10;
  background:linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}

body{
margin-top:170px;
}

<img src="https://29comwzoq712ml5vj5gf479x-wpengine.netdna-ssl.com/wp-content/uploads/2020/01/default.svg">
<div id="grad"></div>

<p> some text to scroll up... some text to scroll up... some text to scroll up... some text to scroll up... </p>
<p> more text to scroll up... </p>
<p> even more text to scroll up... even more text to scroll up... even more text to scroll up... even more text to scroll up... even more text to scroll up... even more text to scroll up... even more text to scroll up... </p><p> some text to scroll up... </p>
<p> more text to scroll up... </p>
<p> even more text to scroll up... </p><p> some text to scroll up... </p>
<p> more text to scroll up... </p>
<p> even more text to scroll up... </p><p> some text to scroll up... </p>
<p> more text to scroll up... </p>
<p> even more text to scroll up... </p><p> some text to scroll up... </p>
<p> more text to scroll up... </p>
<p> even more text to scroll up... </p><p> some text to scroll up... </p>
<p> more text to scroll up... </p>
<p> even more text to scroll up... </p>

向上滚动后，如何使文本在图像下方消失？

How to make a text disapper under an image, after scrolling it up?

html

css

scroll

background-image

document-body