隐藏带有图像作为背景的文本块的效果！ 不透明度的线性梯度？

Question

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 ! 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

 <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

Answer 1

You could use -webkit-mask-image ( browser support )

 #background{ background-image: url(https://media.boingboing.net/wp-content/uploads/2018/05/cool-background1.png); text-align:center; } #opacity-wrapper{ background-image: url(https://media.boingboing.net/wp-content/uploads/2018/05/cool-background1.png); text-align:center; -webkit-mask-image: linear-gradient(to top, rgba(255,255,255, 0) 5%, rgba(255,255,255, 1) 60%, rgba(255,255,255, 0) 95% ) } 

 <div id="background"> <div id="opacity-wrapper"> <p>This is some text</p> <p>This is some text</p> <p>This is some text</p> <p>This is some text</p> <p>This is some text</p> <p>This is some text</p> <p>This is some text</p> <p>This is some text</p> </div> </div> 

Answer 2

You can use CSS background-clip: text . More information at developer.mozilla.org

 .wrapper { background: url('https://media.boingboing.net/wp-content/uploads/2018/05/cool-background1.png') no-repeat center center / cover; padding: 2em; } .wrapper p { background: linear-gradient(-45deg, transparent 20%, #333, transparent 80%); -webkit-background-clip: text; background-clip: text; color: transparent; } 

 <div class="wrapper"> <p>Fusce ac penatibus condimentum a senectus imperdiet aa vulputate parturient blandit a blandit torquent vivamus aenean hendrerit eros tempor class taciti dignissim sed integer. Faucibus vulputate sem ad facilisi orci lacinia parturient ac nunc fermentum nec at vestibulum ac mollis nunc quisque nec ac. Euismod cras nunc sed at himenaeos porta nunc condimentum a sem auctor tempor a senectus suspendisse condimentum laoreet id est habitant magna tortor natoque malesuada a. A dis parturient a in nunc sociis nunc a et cras class vulputate lacus fames odio a ad urna suspendisse adipiscing a vel. Ut porta venenatis fermentum a at iaculis risus porta nec integer ullamcorper a sem duis tempor faucibus malesuada consectetur sem metus vivamus aliquam. Id at imperdiet nibh parturient nullam rutrum hac suspendisse id dapibus nec risus a at quis cum odio praesent metus aliquam lacus suspendisse bibendum eros euismod.</p> </div>