css - 使 DIV 中的文本在 DIV 的顶部和底部淡出的 IE 10+ 等效方法是什么？

Question

给定以下 HTML 和 CSS，如何在 IE 10+ 中生成相同的效果？

    <div class="textFade">
    This is some text.
    This is some text.
    This is some text.
    This is some text.
    <div>This is text inside a div</div>
    <div>This is text inside a div</div>
    <div>This is text inside a div</div>
    <div>This is text inside a div</div>
    <div>This is text inside a div</div>
    <div>This is text inside a div</div>
    <div>This is text inside a div</div>
    <div>This is text inside a div</div>
    <div>This is text inside a div</div>
    <div>This is text inside a div</div>
    <div>This is text inside a div</div>
    <div>This is text inside a div</div>
    <div>This is text inside a div</div>
    <div>This is text inside a div</div>
    This is some text.
    This is some text.
    <div>This is text inside a div</div>
    <div>This is text inside a div</div>
    <div>This is text inside a div</div>
    <div>This is text inside a div</div>
    <div>This is text inside a div</div>
    <div>This is text inside a div</div>
</div> 


    .textFade {
    height: 100px;
    border: none 1px black;
    overflow: auto ;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 15%,rgba(0,0,0,1) 19%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 80%,rgba(0,0,0,1) 81%,rgba(0,0,0,0.8) 85%,rgba(0,0,0,0) 100%); /* W3C */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

如果您在 Chrome 中浏览它，以下 JSFiddle 显示它可以正常工作。

http://jsfiddle.net/7q8hrnn5/

Answer 1

来源:http://ie.microsoft.com/Testdrive/Graphics/CSSGradientBackgroundMaker/Default.html

/* Note: This gradient may render differently in browsers that don't support the unprefixed gradient syntax */

/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);

/* Opera */ 
background-image: -o-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom right, #FFFFFF 0%, #00A3EF 100%);