3

ここで見つけた非常に単純な例に基づいています: <dead link removed>.

CSS は、透明な png とその背後にあるグラデーションの両方を表示する必要があります。この問題は、css の作成方法に関連している可能性があるのではないかと考えています。

body {
background-image:url('Clouds.png');
background-image: linear-gradient(bottom, #9B7698 24%, #4447AB 63%);
background-image: -o-linear-gradient(bottom, #9B7698 24%, #4447AB 63%);
background-image: -moz-linear-gradient(bottom, #9B7698 24%, #4447AB 63%);
background-image: -webkit-linear-gradient(bottom, #9B7698 24%, #4447AB 63%);
background-image: -ms-linear-gradient(bottom, #9B7698 24%, #4447AB 63%);

background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.24, #9B7698),
color-stop(0.63, #4447AB));}

image:url だけを持っている場合は、雲が正常に読み込まれます。ただし、それ以外の場合は、グラデーションのみが表示され、画像は表示されません。

また、ページがスクロールすると静的な雲の画像と噛み合うように、下部が白にフェードする追加のグラデーションを作成できるかどうかも知りたいのですが、一般的にグラデーションに十分慣れていません。前もって感謝します。

4

2 に答える 2

1

単一の宣言を記述し、単一 background(-image)のコンポーネント (画像、グラデーション) を で区切る必要があります。,

background: url('Clouds.png'), linear-gradient(bottom, #9B7698 24%, #4447AB 63%);

あなたの場合、2番目の背景画像定義（グラデーション）は最初のもの（画像）を上書きするだけです。
順序が重要であることを覚えておいてください！最初に画像を宣言する必要があるため、グラデーションの上に表示されます。
古い W​​ebkit 構文は省略できます。もう必要ありません。

また、すべてのブラウザで複数の背景画像がサポートされているわけではないことに注意してください。

于 2012-07-25T08:12:29.617 に答える
0

サポートしているブラウザーでは、複数の背景を使用できます。

background-image: -webkit-linear-gradient(bottom, #9B7698 24%, #4447AB 63%), url('Clouds.png');
background-image: -moz-linear-gradient(bottom, #9B7698 24%, #4447AB 63%), url('Clouds.png');
background-image: -o-linear-gradient(bottom, #9B7698 24%, #4447AB 63%), url('Clouds.png');
background-image: linear-gradient(bottom, #9B7698 24%, #4447AB 63%), url('Clouds.png');

これにより、グラデーションの上に雲の画像が配置されます。古い W​​ebkit 構文と-ms-プレフィックスを削除し、順序を変更したことにも注意してください。-ms-接頭辞付きのグラデーションのみをサポートする IE の安定版リリースがないため、接頭辞は必要ありません。

于 2012-07-25T08:15:39.527 に答える