javascript - 以图片为背景的文字 block 隐藏效果!不透明度的线性梯度？

Question

我试图通过从 block 的顶部和底部慢慢消失来创建文本 block 。我知道我们可以使用这样的东西 another stackoverflow quastion !但我需要使用图像作为背景!而这个帮不了我。

我只发现了一件事如何创建我需要的东西但是!它是 SVG 文本，它不如 html P 或 span 或任何东西好，因为通过保存字体定位滚动和其他东西将文本转换为 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>