1

私の質問はこれです：CSSグラデーションの上下に2つの背景画像を表示するにはどうすればよいですか？JA Elasticaテンプレート（デフォルトのCSSを変更）を使用してJoomlaWebサイトで作業しています。

現在のCSSでは、「background：url（'images'）」をグラデーションの上に配置すると、画像は表示されますがグラデーションは表示されません。グラデーションの下に配置すると、画像は表示されません。

私が現在使用しているコードは次のとおりです。

body#bd {
background-image: linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%);
background-image: -o-linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%);
background-image: -moz-linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%);
background-image: -webkit-linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%);
background-image: -ms-linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.02, rgb(142,210,46)),
color-stop(0.51, rgb(171,252,74)),
color-stop(0.76, rgb(206,255,104)));
background:
url('https://dl.dropbox.com/u/6512758/onebeat.ro/right.png') no-repeat top right,
url('https://dl.dropbox.com/u/6512758/onebeat.ro/left.png') no-repeat top left;
}
4

1 に答える 1

2

すべてが同じbackground-imageプロパティにある必要があります。そうでない場合、前のbackgroundステートメントが次のステートメントに置き換えられます。例えば：

background-image: url('https://dl.dropbox.com/u/6512758/onebeat.ro/right.png') no-repeat top right, linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%);

その他の例については、こちらを確認してください： 同じ要素で背景画像とCSS3グラデーションを組み合わせるにはどうすればよいですか？

于 2012-10-01T14:42:35.107 に答える