4

同様の質問が何度も寄せられていることは承知していますが、実際に私にとって有効な解決策をまだ見つけていません。次の問題をイメージしてください。

状況：

  • ボディには、垂直方向と水平方向の両方で繰り返される固定されていない背景画像があります。
  • 最初の背景画像の上に 2 番目の透明な背景画像が配置されるはずです。

制約:

  • 2 番目の背景は、本文の背景と同様に、ドキュメント全体に広がるはずです。注意: ビューポートだけでなく、ドキュメント全体。
  • 本文の高さがドキュメントの高さよりも小さい (つまり、スクロールバーがない) 場合でも、2 番目の背景はビューポートの下部まで伸ばさなければなりません (したがって、100% html および/または本文の高さで動作するソリューションは問題外です)。
  • 2 番目の背景の位置を固定することはできません。これは、スクロール時に何らかの視差効果が発生するためです。両方のイメージが実際には 1 つであるという錯覚を維持する必要があります。
  • ボディには、マージンやパディングを含めることができます。いずれの背景もドキュメント全体をカバーする必要があります。
  • ボディに 2 番目の背景画像 (" background-image: url(), url();") を使用することは、下位互換性の理由からオプションではありません。
  • JavaScript はありません。
  • 明らかに、実際に 2 つの画像を 1 つにマージする必要はありません。:)

私はこの問題についてしばらく考えていましたが、HTML と CSS2 だけではこれは不可能であるという結論に達しました。私は間違っていることが証明されたいと思っています。

4

4 に答える 4

2

ドキュメント全体をそれぞれカバーする 2 つの別々の背景画像を配置する必要があります。

<html>
<head>
<style>
.firstbackground {
 position:absolute;
 left:0;
 top : 0;
 width : 100%;
 min-height : 100%;
 background: url('first.png') repeat;
}
.secondbackground {
 width : 100%;
 min-height : 100%;
 background:url('second.png'); /* may be transparent, but why add a background then ;-) */
}
</style>
</head>
<body>
 <div class="firstbackground">
  <div class="secondbackground">

  long content

  </div>
 </div>


</body>
</html>
于 2013-03-20T13:28:27.833 に答える
0

秒の背景に position:absolute; を持たせます。

body{
 background:url("http://jsfiddle.net/css/../img/logo.png") #000;
}
#secBg{
 background:url("http://placehold.it/350x150") ;
 position:absolute;
 min-height:500%;
 min-width:100%;

}

<html>
<body>
<div id="secBg">
</div>
</body>
</html>

http://jsfiddle.net/5sxWB/

于 2013-03-20T13:41:34.027 に答える
0

CSS3 では、コンマで区切られた複数の背景を使用できます。たとえば、次のようになります。

background: url('topNonFixedBG.png'), #000 url('mainBG.png') no-repeat fixed top center;
于 2013-03-20T13:27:37.097 に答える
0

http://jsfiddle.net/hs2WT/1/

複数のdivを使用するだけです...

CSS: 

html {
    height: 100%;
}
body { height: 100%;}

.wrapper1 {
    width: 100%;
    height: 100%;
    background: url('http://khill.mhostiuckproductions.com/siteLSSBoilerPlate//images/nav/hixs_pattern_evolution.png');
}

.wrapper2 {
    width: 100%;
    height: 100%;
    background: url('http://khill.mhostiuckproductions.com/siteLSSBoilerPlate//images/nav/yellow1.png');
}

.content { color: #fff; }

HTML: 

<div class="wrapper1">
    <div class="wrapper2">
        <div class="content">
            <p>Some Content</p>
        </div>
    </div>
</div>
于 2013-03-20T13:39:31.430 に答える