17

重複の可能性：
HTML要素の不透明度を段階的に変化させることは可能ですか？

cssを使用して、div（およびその境界線とコンテンツ）を透明（つまり、上部が塗りつぶされ、下部が透明）にフェードインさせようとしています。

これを行う方法はありますか？

次の方法で背景をフェードアウトすることができました。

.fade-to-nothing
{
    background-image: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,1)), to(rgba(255,255,255,0)));
    background-image: -webkit-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
    background-image: -o-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
    background-image: linear-gradient(to bottom, rgba(255,255,255,1),rgba(255,255,255,0));
    background-repeat: repeat-x;
}

しかし、divのコンテンツ/境界線に対してもそれを行う方法を見つけることができませんでした。おそらく、ある種のネストまたはオーバーレイを使用しますか？

ここで私がやろうとしていたことを編集してください：

ここに画像の説明を入力してください

4

2 に答える 2

27

ここで私の答えから引用：

この作業デモを確認し、コンテンツを追加/削除してみてください#contents

HTML

<div id="container">
    <div id="contents">
        Some contents goes here
    </div>
    <div id="gradient">
    </div>
</div>

CSS

#container {
    position:relative;
}
#contents {
    background:red;
}
#gradient {
    position:absolute;
    z-index:2;
    right:0; bottom:0; left:0;
    height:200px; /* adjust it to your needs */
    background: url(data:image/svg+xml;base64,alotofcodehere);
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(70%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
    background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
}​

これは、不透明度をサポートするほとんどすべてのブラウザー（IE9を含む）で機能します。IE8の「rgba」フォールバック（テストされていない）は次のとおりです。

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );

独自のグラデーションを生成するには、Colorzillaにアクセスしてください。

最初のストップ（0％）は不透明度0（rgba(255,255,255,0);）である必要があり、次に約70％-いくつかのテストを実行して自分に適したものを見つけます-不透明度1（rgba(255,255,255,1);）で別のストップを追加します。

于 2012-10-08T10:30:57.563 に答える
1

その知識を有利に使用できる高さを知っている場合は、いつでもjsから更新できますが、これは無数のグラデーションを定義するよりも少し簡単に思えますhttp://jsfiddle.net/6cXRZ/4/調整できますあなたが好きなだけ隠すためのあなたのパラメータ

于 2012-10-08T10:46:33.420 に答える