0

皆さんの助けを借りて。私はCSSに不慣れではありませんが、この問題には不慣れです。私は本当にCSSグラデーションプロパティを使いたかったのです。しかし、私が必要とする方法は、下から上、そして右から左へのグラデーションを設定する必要があるということです。ページの右下と下にあるスクロールバーのように。下から上に1つのクラスを作成し、右から左に1つのクラスを作成しました。SimpeCSSのコンセプトを最新のスタイルで上書きします。

どうすればこの状況に取り組むことができますか。私が試した方法は次のとおりです。

.bottom_to_top{background: -webkit-linear-gradient(center top, #FFFFFF 95%, #80868E 100%);}
.right_to_left{-webkit-linear-gradient(center left,#FFFFFF 95%, #80868E 100%);}

私はこれらの2つのクラスを呼び出しましたが、単に1つが別のクラスによって上書きされます。どうすればこの状況に取り組むことができますか。ブラウザとの互換性はありません（Chromeのみ）。画像の使用も必要ありません。

4

2 に答える 2

2

両方のグラデーションを表示するには、一番上のグラデーションに半透明度が必要です。

デモ

CSS：

.bottom_to_top{
    background: -webkit-gradient(linear, center top, center bottom, color-stop(95%, #FFFFFF), color-stop(100%, #80868E));
    background: -webkit-linear-gradient(top, #FFFFFF 95%, #80868E 100%);
}
.right_to_left{
    background-image: -webkit-gradient(linear, left center, right center, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(95%, rgba(255, 255, 255, 0.5)), color-stop(100%, #80868E));
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.5) 95%, #80868E 100%);
}​

の代わりにを.right_to_left使用していることに注意してください。必要に応じて調整します（visualcsstoolsのような単純なオンラインジェネレーターを使用できます）。rgbahex

また、Chromeを完全にサポートするには、二重宣言が必要です（Chrome <10）

複数のbgsで単一のdivを使用する：

デモ

.gradients{
    background:-webkit-gradient(linear, left center, right center, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(95%, rgba(255, 255, 255, 0.5)), color-stop(100%, #80868E)), -webkit-gradient(linear, center top, center bottom, color-stop(95%, #FFFFFF), color-stop(100%, #80868E));
    background:-webkit-linear-gradient(left, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.5) 95%, #80868E 100%),  -webkit-linear-gradient(top, #FFFFFF 95%, #80868E 100%);
}

ご覧のとおり、最初の宣言は前の宣言で、2番目の宣言は背景です。

于 2012-10-15T10:12:27.643 に答える
1

あなたの問題は、あなたが実際に-webkit-linear-gradient(center left,#FFFFFF 95%, #80868E 100%);使うべきものだけを使っているということです

-webkit-linear-gradient(center left,#FFFFFF 95%, #80868E 100%);
-o-linear-gradient(center left,#FFFFFF 95%, #80868E 100%);
-moz-linear-gradient(center left,#FFFFFF 95%, #80868E 100%);

IEはグラデーションを使用するのが難しいため、使用する必要がありますfilter

于 2012-10-15T09:57:21.310 に答える