web-dev-qa-db-ja.com

リニアフェードアウトdiv、コンテンツ、および境界線（上部が無地から下部が透明）

可能性のある複製：
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のコンテンツ/境界にそれを行う方法を見つけることができませんでした。おそらく、ある種のネストまたはオーバーレイを使用していますか？

[〜＃〜] edit [〜＃〜]私がやろうとしていたことをここに示します：

enter image description here

csstransparency
16
Not loved

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

この working demo を確認し、_#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); ）。

25
Giona

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

1
xception