2011-05-05 27 views
1

パターンの背景とその上に白から黒(透明度あり)グラデーションを作成したいと思います。それをどのように動作させ、それをクロスブラウザでも動作させる方法は?私はMozillaを使い始めており、以下のコードを使用しようとしています。背景の上にCSSのグラデーション

background: url(../images/bg_pattern.gif), -moz-linear-gradient(rgba(255, 255, 255, 0.5) 5%, rgba(130, 130, 130, 0.5) 95% 

もちろんこれは機能しません。では、どうやってそれを解決するのですか?コードが他のブラウザをどのように見えるでしょうか? IEは多くの背景と透明性をサポートしていますか?私はそうではないと思うので、私はあなたの答えの前に尋ねるでしょう - どのようにIEのためにそれを動作させる?

+1

IEは、CSS3のための最も貧しいサポートしている、と私はそれをすべての範囲を知らないが、このサイトは良いにあなたを指している可能性がありますように見えます出発点。 http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/ – robx

答えて

2

2つの別々の要素が必要です.1つはもう一方を重ねて表示します。一番上の要素は、グラデーションのように聞こえます。また、FYIここだけ別にイベントで今週発売し、クロスブラウザの勾配を生成するための素晴らしいツールです。

http://www.colorzilla.com/gradient-editor/

+0

ええ、そのクールなアプリだが、すべてのブラウザでこのグラデーションを使って作業するのは非常に難しいので、これを最もシンプルにした方法。私は今PNGグラフィックとその私の背景を作った。しかし、bgグラフィックの高さをどのようにしてサイズを変更すれば、divの高さに自動的に合うようにすることができますか? – smogg

+0

@smogg - この質問は、元の質問に追加するか、新しい質問で作成する必要があります。要するに、あなたの背景イメージがどのように見えるか(IOW、より多くの情報が必要です)によって異なります。 – Shauna

+0

@Shauna私はちょうど新しい初心者の質問で迷惑メールにしたくないのですが、OK、もう一度やります。ありがとうございました。 – smogg

1

私はIEを除くすべてのための作業バージョンを持っています。 :/私はそれを見つけた場所を覚えていないので、私は適切な信用を与えることはできません。ただし、ここにあります:

背景:-webkit-linear-gradient(rgba(224,147,43、.9)、rgba(224,147,43、.8))固定、#454040 url(images/grainy2.png )は繰り返し固定されています。背景:-ms-linear-gradient(rgba(224,147,43、.9)、rgba(224,147,43、.95))固定、#454040 url(images/grainy2.png)が繰り返し修正されました。 バックグラウンド:-o-linear-gradient(rgba(224,147,43、.9)、rgba(224,147,43、.95))固定、#454040 url(images/grainy2.png)バックグラウンド:-moz-linear-gradient(rgba(224,147,43、.9)、rgba(224,147,43、.95))は固定、#454040 url(images/grainy2.png)

最初の色は上、下は2番目、3番目はパターン上の色です(どのように透明にするかはわかりません)。最後にあなたのパターンに向かうだけです。

私はmsが何であるか完全にはわかりません。私が言ったように、私は数ヶ月間使ってきましたが、ソースを覚えていません。私は彼らが働くことを確認するためにすべてを使用しています。それでもIEへの修正:/

+0

別々のレイヤーは必要ありません。 –

1

はこれを試してみてくださいません:

background-image: url(images/pattern.png), -webkit-radial-gradient(0% 100%, rgb(20,150,254), rgb(119,117,174)); 
    background-image: url(images/pattern.png), -moz-radial-gradient(0% 100%, rgb(20,150,254), rgb(119,117,174)); 
    background-image: url(images/pattern.png), -ms-radial-gradient(0% 100%, rgb(20,150,254), rgb(119,117,174)); 
    background-image: url(images/pattern.png), -o-radial-gradient(0% 100%, rgb(20,150,254), rgb(119,117,174)); 
    background-image: url(images/pattern.png), radial-gradient(circle at 0% 100%, rgb(20,150,254), rgb(119,117,174)); 
関連する問題