Скрытие эффекта блока текста с изображением в качестве фона!линейный градиент непрозрачности?

Question

Я пытаюсь создать текстовый блок с медленным исчезновением его сверху и снизу блока.Я знаю, что мы можем использовать что-то вроде этого еще один вопрос стекопотока !Но мне нужно использовать изображение в качестве фона!и этот не может мне помочь.

Я нашел только одну вещь, как создать то, что мне нужно, но!это текст SVG, и он не годится как html P или span или что-то еще из-за проблемы преобразования текста в svg с сохранением прокрутки позиционирования шрифтов и других вещей svg пример

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

Мне нужно именно то, что я сделал с SVG, но с HTML

Answer 1

Вы можете использовать CSS background-clip: text.Больше информации на 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>

Answer 2

Вы можете использовать -webkit-mask-image ( поддержка браузера )

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