html - CSSの背景色の上に背景画像を使用する

Question

私はPSDでウェブページをデザインしました、そして私はそれを変換している最中です。メインコンテンツ内では、背景色は無地ですが、背景色の上に表示される別のレイヤーにグロー効果があります。

すべてのコードを含むコンテナーがあり、ヘッダー、メイン、およびフッターがあります。メイン内に、無地の背景色を追加し、PSDからスライスしたグローの背景画像も追加しました。ただし、無地の背景色は表示されず、グロー効果を示しているだけです。以下の画像は、それがどのように見えるか、そしてそれがどのように見えるべきかを示しています：

---

CSS：

Html {
background: white;
}

#container {
width: 955px;
height: 900px;
margin: 0px auto 0px auto;
}

#main{
background: url(../images/slogan.png) top left no-repeat;
background-color: #282d37;
height: 900px;
width: 955px;
}

Answer 1

マルチバックグラウンドを使用できます。

#main {
  width: 900px;
  height: 955px;
  background: url(../images/slogan.png) no-repeat, #282d37;
}​

説明するには：backgroundcssオプションを使用し、背景色ではなく、最初に画像を追加します。

ライブデモ

Answer 2

問題は、あなたのスタイルがお互いを上書きしていることです。background-color最初に配置し、のbackground-image代わりに使用する必要がありbackgroundます。backgroundプロパティが1つを上書きしないように、独自のプロパティですべての値を宣言しますbackground-color。

#main{
  background-color: #282d37;
  background-image: url(../images/slogan.png);
  background-position: left top;
  background-repeat: no-repeat;
  height: 900px;
  width: 955px;
}​

Answer 3

これを行う方法は、背景色を設定するラッパーで#main要素をラップし、それに一致する不透明度を設定することです（必要な場合）

#mainwrapper{
  background-color: red;
  height:100px;
  width:100px;
}

#main{
  background: url(http://www.w3schools.com/css/klematis.jpg) repeat;
  opacity: 0.6;
  filter:alpha(opacity=60); 
  height:100px;
  width:100px;
}

<div id="mainwrapper">
  <div id="main">
  </div>
</div>

Answer 4

交換してみてください

background: url(../images/slogan.png) top left no-repeat;
background-color: #282d37;

と

background: #282d37 url(../images/slogan.png) no-repeat top left;