2

わかりました、これが可能かどうかはわかりません。コードに問題があるだけです...

それで、グラデーション内に線形グラデーションを作成しようとしていますか?

background: -webkit-linear-gradient(top, #9DB2F0 0%, #9DB2F0 40%, -webkit-linear-gradient(left, red 0%, yellow 100%) 40%)

可能であれば、私が何か間違ったことをしているかどうか、またはどのブラウザでそれが可能か教えてください.

4

2 に答える 2

5

グラデーションは画像の値であり、色の値ではありません。CSS3 のグラデーションはカラー ストップのみを使用するため、そのようにネストすることはできません。

最終的なグラデーションがどのように見えるかを視覚化するのに役立つグラデーションまたは画像エディターを見つけたいと思うでしょう (あなたがどのように見せたいのかわからないため)。あなた。

しかし、私が見たところ、多方向のグラデーションのように見えます。その場合、レイヤー化された背景(レイヤーごとに 1 つのグラデーション) を使用するか、代わりに実際の画像を使用することをお勧めします。

于 2012-06-19T17:43:28.230 に答える
0

@BoltClock に追加するだけで、いくつかのトリックに答えることができます。

  • 彼が答えで述べたように、背景を重ねました。複数の背景「画像」（グラデーション）で行われます。それぞれは次の方法で制御できます。

    background-position: left center, right top;
background-repeat: repeat, no-repeat;

    スタイルを設定したい2つの画像/グラデーションがある場合。

  • :beforeおよび擬似に追加された勾配:after。これらの擬似は、必要な場所にサイズを設定して配置できます (絶対配置、z-indexメインの背景と実際のコンテンツの間にそれらを少しレイヤー化する必要があります)。たとえば、私の以前の回答とフィドルを参照してください: CSSを使用して背景として2つの異なるグラデーションを表示していますか?

    を介してグラデーションを追加することはできずcontent: url() url()、画像のみ (url() の任意の有効な値) を追加することはできないようです。また、追加されたものはcontent実際の背景 (繰り返し、位置) として制御できないため、機能したとしても最も用途の広い方法ではありません。

于 2012-06-19T18:14:56.453 に答える