Hiding effect of block of text with image as background! linear gradient of opacity?

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

use a gradient from a pseudo, lay it over the page and kill pointer-events https://codepen.io/anon/pen/VNQaQp — G-Cyrillus, Apr 17 '19 at 09:31
@G-Cyr check plz my first link it is the same what you write in comment. It work not like it needed. — HuekoMundo, Apr 17 '19 at 10:09
If you set the gradient in the background, it will be behind the text. you can make a search on mix-blend-mode, but it will be also painfull and not crossbrowser. https://css-tricks.com/almanac/properties/m/mix-blend-mode/ mix-blend-mode could be used as an alternative of background-clip when firefox did not understand it — G-Cyrillus, Apr 17 '19 at 12:49

score 2 · Accepted Answer · edited Apr 17 '19 at 10:13

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>

Thanks for answer @Recep Karadas didn't hear about -webkit-mask-image I need to check ur variant and next one in my project soon. I cant choose the better one. Sad that It is not possible. — HuekoMundo, Apr 17 '19 at 11:57

score 2 · Answer 2 · answered Apr 17 '19 at 09:33

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

Thanks for answer @wiiiiilllllll didn't hear about background-clip too ) I also need to check ur variant. I cant choose the better one now. Sad that It is not possible. — HuekoMundo, Apr 17 '19 at 11:58
I'm curious - Is there something wrong with my answer? I thought it was exactly what you need. — wiiiiilllllll, Apr 17 '19 at 12:31
the 45deg value maybe confused the op, or it is about its browser ;) — G-Cyrillus, Apr 17 '19 at 12:51
@wiiiiilllllll nono Im confusing because U both have a working example for me. and now I cant check which will be better. i'll choose one some later. — HuekoMundo, Apr 17 '19 at 14:32

Hiding effect of block of text with image as background! linear gradient of opacity?

2 Answers2