html - 使用 CSS 淡化元素顶部

Question

如何在 CSS 中创建与此类似的效果（右侧的框）？

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

Answer 1

您可以使用图像蒙版。然而，这仅适用于几乎所有的 Chrome。更多信息。

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-gradientwith 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/

---

PS不要忘记生产中的供应商前缀......