15

テクスチャ イメージでタイル張りされた背景のオーバーレイとして複数の css3 グラデーションを使用する Web サイトに取り組んでいます

サイトの URL: --snipped--

現在、ヘッダーには次のcssを使用しています:

#header {
 background: #DBD6D3;
 height: 364px;
 background: -moz-radial-gradient(50% 0% 0deg,circle farthest-corner,#FFFFFF,#DBD6D3);
 background: -webkit-gradient(radial,50% 59,500,50% 0,40,from(#DBD6D3),to(#FFFFFF));
}

#header .wrp{background:url('img/headerBg.png');height:100%;padding-top:40px;}

ここで headerBg.png は、サイズ 5x5 ピクセルの半透明のテクスチャです。この背景を作成する必要がある body の広告です。 代替テキスト

CSS3 でこの種の放射状の背景を作成する方法を知る必要があります。最初はヘッダーと同じコードを使用していましたが、色には rgba() を使用し、グラデーションの終わりを不透明度 0 に設定しましたが、ノイズが多すぎました。

CSS3 ラジアル バックグラウンド用のオンライン ジェネレーターもいくつか試しましたが、どれもうまくいきませんでした。

私が使用しているこの画像は 280kbs を占めており、パフォーマンスに大きな影響を与えるため、削減したいと考えています! 助けていただければ幸いです。

アップデート：

psd をアップロードします。http: //ylspeaks.com/stackoverflow_css3.zipからダウンロードできます。

賞金の追加

4

2 に答える 2

23

2011 年 1 月の編集: Webkit nightly は現在、楕円グラデーションhttp://webkit.org/blog/1424/css3-gradients/をサポートしています。これらは最終的に Safari と Chrome に導入される予定です。CSS 変換による楕円形の放射状グラデーションの偽装は、最終的には不要になります。

あなたの問題には、これまでに遭遇した中で最も難しい制約がありますが、興味深い課題であり、放射状の背景に対する各ブラウザーのアプローチの制限を示しているため、試してみることにしました.

まず、不透明度によってノイズの一部が隠されるため、rgba のアプローチは失敗に終わります。グラデーションの上に半透明のノイズを適用することをお勧めします。同じ画像に複数の背景を適用することで、余分な div を回避できます。

background: url(noise.png)  repeat top left, -webkit-gradient(radial,50% 0,700,50% 0,100,from(#6f2813),to(#B9513D))  transparent;

宣言の最後に color プロパティがあることに気付くかもしれませんが、奇妙に見えますが、これは複数の背景を適用するときに色を宣言する方法です。

次に、webkit は楕円形の背景をサポートしていないため、これを回避するには、-webkit-transform を使用してグラデーションを押しつぶし、少し上に配置します。

-webkit-transform: scale(1, 0.7) translate(0, -350px);

正気を保つためには、FF と Webkit の両方に円形の背景を適用してから変換するのが正しいと思われます。ただし、Firefox の変換はスケーリング グラデーションをサポートしていません! そのため、楕円形の背景を適用します。

background: url(noise.png)  repeat top left, -moz-radial-gradient(50% 0 0deg,ellipse farthest-side,#B9513D,#6f2813) transparent;

でも、Webkitのコンテナがつぶれているので、Firefoxの方がグラデーションが大きい！この時点で、グラデーションの高さに異なる CSS ルールを適用することを検討しますが、Firefox はグラデーションをスケーリングしないため、楕円形の背景に同じ変換を適用して、コンテナーを同じ高さにすることができます。

-moz-transform: scale(1, 0.7) translate(0, -250px);

そして出来上がり！Safari と Firefox の両方で機能する、ノイズのある楕円形のグラデーションがあります。

http://duopixel.com/stackoverflow/gradient/代替テキスト

于 2010-12-24T18:16:25.240 に答える
0 
background: #702914;
background: -moz-radial-gradient(50% 0% 0deg,circle farthest-corner,#A94122,#702914);
background: -webkit-gradient(radial,50% 59,500,50% 0,40,from(#702914),to(#A94122));
于 2010-12-23T16:19:04.333 に答える