0

背景画像を挿入したり、ヘッダーとフッター セクションの背景をグラデーションにしたりするのに問題があります。背景画像を繰り返さなければなりません。.gif 画像は css と同じフォルダーにある必要がありますか? そのためのcssです。

body {
    background-image: url("folder1/pic.gif");
    background-repeat: repeat-x repeat-y;
}

また、白からオレンジ、黒への線形グラデーションにも取り組んでいます。このグラデーションは、ヘッダー セクションとフッター セクションの背景になります。ヘッダーとフッターのセクションを分割して、線形グラデーションの背景を提供することはできますが、ヘッダーとフッターの境界までは拡張されません。これは、ヘッダーの html セクションです。

<header>
    <div id="eg1">
        <img src="images/pumpkin.gif" alt= "pumpkin" height="78" width="85">
        <h1>The Halloween Store</h1>
        <h3>For the little Goblin in all of us!</h3>
    </div>
</header>

私が持っているhtmlをフォーマットするcss

/*gradient header*/
#eg1 {
    background-image: -webkit-linear-gradient(45deg,  white 0%, #ffa500 75%, #000000 100%);
}
4

1 に答える 1

0

この例でわかるように、グラデーションはうまく表示され、背景画像も表示されます。

注意: 一部のブラウザでは、ブラウザのバージョンまたは構文が原因で、グラデーションが表示されない場合があります。

そのため、可能な限り多くのブラウザーがサポートされるように、グラデーションのすべてのプレフィックスを使用しました。

  background-image: linear-gradient(45deg,  white 0%, #ffa500 75%, #000000 100%);
  background-image: -webkit-linear-gradient(45deg,  white 0%, #ffa500 75%, #000000 100%);
  background-image: -moz-linear-gradient(45deg,  white 0%, #ffa500 75%, #000000 100%);
  background-image: -o-linear-gradient(45deg,  white 0%, #ffa500 75%, #000000 100%);

ブラウザのサポートについて詳しくは、これを確認してください

于 2016-09-28T18:59:54.333 に答える