Im trying to create text block with slowly disapearing it from top and bottom of the block. I know that we can Use something like this [another stackoverflow quastion](https://stackoverflow.com/questions/14500159/how-to-apply-a-css-gradient-over-a-text-from-a-transparent-to-an-opaque-colour)! But I need to Use Image as background! and this one cant help me.

I found only One thing how to create the same what I need but ! it is SVG text and its not good as html P or span or anything because of problem of converting text to svg with saving fonts positioning scrolling and other things [svg example](https://jsfiddle.net/tacm8xL0/)

```html
<svg width="100%" height="100%" viewBox="0 0 401 201" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
    <linearGradient id="linearGradient857">
        <stop id="stop853" offset="0" style="stop-color:#000000;stop-opacity:0" />
        <stop style="stop-color:#000000;stop-opacity:1" offset="0.3" id="stop863" />
        <stop style="stop-color:#000000;stop-opacity:1" offset="0.7" id="stop861" />
        <stop id="stop855" offset="1" style="stop-color:#000000;stop-opacity:0;" />
    </linearGradient>
    <linearGradient gradientUnits="userSpaceOnUse" y2="0" x2="0" y1="201" x1="0" id="linearGradient859" xlink:href="#linearGradient857" />
</defs>
<g>
    <image xlink:href="https://media.boingboing.net/wp-content/uploads/2018/05/cool-background1.png" x="0" y="0" height="201" width="401" /> 
    <g transform="translate(150)">
        <text id="text817" y="16.541666" x="21.166666" style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:url(#linearGradient859);fill-opacity:1;stroke:none;stroke-width:0.26458332" xml:space="preserve">
            <tspan style="stroke-width:0.26458332;fill-opacity:1;fill:url(#linearGradient859)" y="16.541666" x="21.166666" id="tspan815">qweqwejnwe.r werw erwer ,</tspan>
            <tspan id="tspan819" style="stroke-width:0.26458332;fill-opacity:1;fill:url(#linearGradient859)" y="29.770832" x="21.166666">qweqwejnwe.r werw erwer ,</tspan>
            <tspan id="tspan821" style="stroke-width:0.26458332;fill-opacity:1;fill:url(#linearGradient859)" y="43" x="21.166666">qweqwejnwe.r werw erwer ,</tspan>
            <tspan id="tspan823" style="stroke-width:0.26458332;fill-opacity:1;fill:url(#linearGradient859)" y="56.229164" x="21.166666">qweqwejnwe.r werw erwer ,</tspan>
            <tspan id="tspan829" style="stroke-width:0.26458332;fill-opacity:1;fill:url(#linearGradient859)" y="95.916664" x="21.166666">qweqwejnwe.r werw erwer ,</tspan>
            <tspan id="tspan831" style="stroke-width:0.26458332;fill-opacity:1;fill:url(#linearGradient859)" y="109.14583" x="21.166666">qweqwejnwe.r werw erwer ,</tspan>
            <tspan id="tspan833" style="stroke-width:0.26458332;fill-opacity:1;fill:url(#linearGradient859)" y="122.375" x="21.166666">qweqwejnwe.r werw erwer ,</tspan>
            <tspan id="tspan835" style="stroke-width:0.26458332;fill-opacity:1;fill:url(#linearGradient859)" y="135.60416" x="21.166666">qweqwejnwe.r werw erwer ,</tspan>
            <tspan id="tspan837" style="stroke-width:0.26458332;fill-opacity:1;fill:url(#linearGradient859)" y="148.83333" x="21.166666">qweqwejnwe.r werw erwer ,</tspan>
            <tspan id="tspan839" style="stroke-width:0.26458332;fill-opacity:1;fill:url(#linearGradient859)" y="162.0625" x="21.166666">qweqwejnwe.r werw erwer ,</tspan>
            <tspan id="tspan841" style="stroke-width:0.26458332;fill-opacity:1;fill:url(#linearGradient859)" y="175.29166" x="21.166666">qweqwejnwe.r werw erwer ,</tspan>
        </text>
    </g>
</g>
</svg>
```

I need exactly what i did with svg but with html