0

印刷デザイナーがデザインしたウェブサイトを作成しています。背景は次の 2 つの画像で構成されます。

y 軸に沿って繰り返され、ページの下部に配置された 1 つのグラデーション ページの下部に配置され、中央に配置された 1 つの画像 (円)

デモ： ここに画像の説明を入力

サークル部分はかなり大きく、ほとんどのページ コンテンツが含まれています。(~900px × ~750px)。

ページが小さすぎる場合は、スクロールを追加する必要があります。ページが大きすぎる場合。領域を埋めるには、最初の画像 (垂直) と背景色 (水平) が必要です。複数の背景を使用したいのですが、サイトには IE8 のサポートが必要です。

4

2 に答える 2

2

グラデーション用に1pxのストリップを切り取り、体に水平に繰り返します。アタッチメントを固定に設定します。

円を切り取り、コンテンツコンテナの背景画像として配置します。これは、前のグラデーションが透けて見えるようにする透明度のあるpngになる可能性があります。

CSS

body {
   background: url('bg.jpg') center bottom repeat-x fixed;
}

.container {
   background: url('circle.png') no-repeat center bottom;
   margin: 0 auto;
   min-height: 750px;
   width: 900px;
}

HTML

<body>
 <div class="container">
    content here
 </div>
</body>
于 2013-01-17T18:00:59.937 に答える
0

または、CSS3を使用してグラデーションを配置し、画像を完全に回避することもできます。一部の古いブラウザはこれをサポートしていませんが、静的なグラデーション画像を使用するよりも少し柔軟性があります。

この便利なジェネレーターをチェックしてください-色とスタイルを選択するだけで、コードが表示されます：http: //www.colorzilla.com/gradient-editor/

于 2013-01-17T18:06:48.530 に答える