使用CSS淡化元素的顶部

Question

如何在CSS中创建类似于 this 的效果（右侧方框）？

小问题，但短暂是甜蜜的。我发布了我尝试过的代码，但是我不能开始淡化整个盒子，这也足以满足我的目的（我可以在下面添加另一个带背景的div，我只需要淡化文本）。

Answer 1

您可以使用图像蒙版。但是这仅适用于Chrome。的 More info

element {
    -webkit-mask-image: -webkit-gradient(
        linear, 
        0 0, 
        0 50%, 
        from(rgba(0, 0, 0, 0)), 
        to(rgba(0, 0, 0, 1))
    )
}

JSFiddle

Answer 2

将linear-gradient与rgba一起使用，从完全不透明度变为0，使用相同的颜色：

div {
    width: 400px;
    margin: 20px auto;
    background: rgb(163, 182, 245);
    padding: 10px;
    position: relative;
}

div:before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 80px;
    background: linear-gradient(
        rgba(163, 182, 245, 1),
        rgba(163, 182, 245, 0)
    );
}

这是小提琴：http://jsfiddle.net/HUHKB/

---

P.S。不要忘记生产中的供应商前缀......