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

Question

我试图创建文本块，从块的顶部和底部慢慢消失。我知道我们可以使用像这样的another stackoverflow quastion！但我需要使用Image作为背景！而这一个不能帮助我。

我发现只有一件事如何创造我需要的东西但是！它是SVG文本，它不如html P或跨度或任何东西，因为将文本转换为svg与保存字体定位滚动和其他东西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>

我完全需要用svg做的，但用html

Answer 1

你可以使用-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

你可以使用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>