Question

我正在尝试这样做 Using CSS, can you apply a gradient mask to fade to the background over text? 但我想从顶部和底部应用渐变。

-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)));
}

用css应用渐变蒙版

1 个答案: