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

PS本番環境ではベンダープレフィックスを忘れないでください...

于 2013-02-10T02:20:29.890 に答える