0

如何在 CSS 中创建与此类似的效果(右侧的框)?

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

4

2 回答 2

2

您可以使用图像蒙版。然而,这仅适用于几乎所有的 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

于 2013-02-10T02:30:21.237 回答
1

使用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不要忘记生产中的供应商前缀......

于 2013-02-10T02:20:29.890 回答