0

だから私は今自分のウェブサイトをコーディングしています.2つのdivを使用して背景にグラデーションを作成しています.div#bg1はグレーでdiv#bg2はダークグレーです. しかし、ラッパー div を追加すると、bg1 と bg2 は依然としてラッパーの上部の配置に従いますが、そうすべきではありません。bg1 と bg2 は一番上にとどまるはずです。

ここにHTMLがあります：

<div id="bg1"> </div>
<div id="bg2"> </div>
    <div id="wrapper"></div>

およびスタイルシート:

div#wrapper {
  background-color: #FFFFFF;
  width: 800px;
  height: 1000px;
  margin-left:auto;
  margin-right:auto;
  margin-top: 30px;
  position: relative;
  z-index:3;
}

div#bg1 {
  width: 100%;
   margin:0px;
   padding:0px;
  height: 200px;
  background-color: #ccc;
  z-index: 2;
  position: absolute;
  box-shadow: inset 0px 10px 60px 0px rgba(0, 0, 0, 0.6);
}

div#bg2 {
  width: 100%;
   margin:0px;
   padding:0px;
  height: 100px;
  background-color: #444444;
  z-index: 2;
  position: absolute;
  box-shadow: inset 0px 10px 60px 0px rgba(0, 0, 0, 0.7);
}

私は現在私のウェブサイトにコードを持っています: http://andreassvarholt.com/test/test3/

4

2 に答える 2

0

両方の BG div が絶対位置に設定されています。

強制的に上部に表示するには、"top" CSS 属性を定義する必要があります。

  div#bg1 {
    top: 0;
  }

  div#bg2 {
    top: 0;
  }

さらに、あなたの実装は洗練されていないことを指摘しなければなりません。本体の背景画像として並べて表示する 1px x 200px の画像を作成するだけです。単純な背景効果のためだけに div の上に div を積み重ねても意味がありません。

于 2012-08-21T19:32:44.137 に答える
0

div を使用して背景のグラデーションを作成するのは、ちょっと厄介です。オンラインで入手できる多くの無料の css3 グラデーション ジェネレーターの 1 つに行ってみませんか。無料で簡単。

幸運
を祈ります - ブライアン

于 2012-08-21T19:33:41.393 に答える