css - 使用 css 应用渐变蒙版

Question

我正在尝试 使用 CSS 来做到这一点，您可以应用渐变蒙版以淡入文本背景吗？ 但我想从顶部和底部应用渐变。

-webkit-mask-image: -webkit-gradient(linear, left 30%, left bottom, left top, from(rgba(0,0,0,1)),      to(rgba(0,0,0,0)));

http://jsfiddle.net/QZMyd/ 但它不起作用

Answer 1

请在 Chrome 中测试这个演示：http: //jsfiddle.net/95vPC/5/

<div class="element">
    <p>Lorem ipsum dolor sit … amet.</p>
</div>

---

* {
    margin: 0px;
    padding: 0px;
}
.element {
    width: auto;
    height: 300px;
    overflow: hidden;
    color: #fff;
    background: #000045;
    -webkit-mask-position: 0 0;
    /*-webkit-mask-size: 200px 200px;*/
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(30, 87, 153, 0)), color-stop(19%, rgba(30, 87, 153, 0.66)), color-stop(29%, rgba(45, 70, 237, 1)), color-stop(100%, rgba(45, 70, 237, 0)));
}