2

重複の可能性：
複数の背景画像と背景色

2つの背景画像と1つの背景色を使用できますか？

現在、私は目的の効果を達成するためにこのコードを持っています：

#myelement {
   background: url("http://zbee.me/tz/bottom-right.png") no-repeat right bottom, 
   url("http://zbee.me/tz/top-left.png") no-repeat left top, 
   url("http://zbee.me/tz/bg.png");
}

しかし、私は次のようなものを使用したいと思います：

#myelement {
   background: url("http://zbee.me/tz/bottom-right.png") no-repeat right bottom, 
   url("http://zbee.me/tz/top-left.png") no-repeat left top;
   background-color: #35434E;
}

出来ますか？

4

2 に答える 2

2

同時に2つの画像を探していて、それらがそのまま残る場合は、この投稿を見ると、必要なものが説明されています。CSSを使用して複数の背景画像を作成できますか？

残念ながら、背景を個別に操作する場合は、このような組み合わせを使用することはできませんが、それぞれが独自の背景を持つレイヤーのように、分割を重ねることはできます。

ベストショットは、ディビジョン内に2つのディビジョンを配置し、それぞれに独自の背景と位置を設定し、親が相対的で子が絶対的であることを確認することです。

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

CSS：

#wrapper{
 position:relative;
 width:500px;
 height:500px;
 background: /* The bacground color you need */
}

#bg1{
 position:absolute;
 width: 250px;
 height:500px;
 right:0;
 background: /* The bacground you need and position */
}

#bg2{
 position:absolute;
 width: 250px;
 height:500px;
 left:0;
 background: /* The bacground you need and position */
}
于 2012-11-21T23:11:13.993 に答える
1

それは同じくらい簡単です

#myelement {
   background: url("http://zbee.me/tz/bottom-right.png") no-repeat right bottom, 
   url("http://zbee.me/tz/top-left.png") no-repeat left top,
   #35434E;
}

backgroundプロパティはbackground-layersで構成され、最後のレイヤーはカラーにすることができます。

于 2012-11-21T23:12:38.813 に答える