4

さて、私はこの問題を何年も解決しようとしてきました。さまざまな解決策を試しましたが、同じ問題に再び直面していることに気付いたので、この問題を解決する最善の方法をコミュニティに尋ねたいと思います.

ページの背景に 2 つの画像を配置したいと考えています。したがって、ページは次のようになります。

ここに画像の説明を入力

これは、CSS の背景 img() ではなく、フッターの近くの画像を使用して実現しました。

<style>
.specialImage{
  position: absolute;
  bottom:0;
  right:0;
  z-index:-99; /* or higher/lower depending on other elements */
}
</style>
<img src="/static/assets/img/stain.png" class="specialImage" />

これの問題は、ページが画面よりも長い場合、次のようになることです。

ここに画像の説明を入力

ダメ。位置を「固定」に変更すると、「スティッキー」効果が発生しますが、これは望ましくありません。したがって、この通りは立ち入り禁止です。

ルート 2: CSS バックグラウンド ソリューション。残念ながら、このコードは機能しません:

body {
  color: #333333;
  background: 
    url("/static/assets/img/fabric_1.png"),
    url("/static/assets/img/stain.png");

  background-repeat: repeat,
    no-repeat;

  background-position: 0 0,
  right bottom;
}

だから、私はこれを試しました：

   html{
     background:
     url("/static/assets/img/fabric_1.png");
     background-repeat: repeat;
     background-position: 0 0;
   }

   body {
     background:
       url("/static/assets/img/stain.png");

     background-repeat:
                no-repeat;

     background-position:
                right bottom;

   }

長いページの場合、どちらが機能しますか。万歳！しかし、短いページに戻ると、次のようになります。

ここに画像の説明を入力

クソ野郎！

それで、ここでの解決策は何ですか？スティッキーフッター？最低身長？ラッパー？私がこれまでに試した解決策のいずれも、両方の状況で望ましい動作を生成しません。

StackOverflow の長老たち、どうすればいいですか?

ありがとう!, R

4

5 に答える 5

1

私が理解しているように、背景画像を下と右に貼り付けたいですか？解決策は次のとおりです。

body { background: url("/static/assets/img/stain.png") right bottom no-repeat; }
于 2013-01-17T06:44:57.113 に答える
1

うーん、css3 では複数の背景を使用できます。これを試すことができますか？

html{
     background: url("/static/assets/img/fabric_1.png"), url("/static/assets/img/stain.png");
     background-repeat: repeat, no-repeat;
     background-position: 0 0, right bottom;
   }

   body {
     color: #333333;
   }
于 2013-01-17T07:16:33.643 に答える
1

同じ問題が発生した場合、私の解決策には、html 要素の min-height を 100%、高さを auto に設定することが含まれます。

body, html {
width:100%;
height:auto;
min-height:100%;
margin: 0px;
padding: 0px;
}

body {
background-image: url(../images/bkgrnd-footer.jpg);
background-repeat: no-repeat;
background-position: bottom left;
}

短いページは表示ウィンドウの高さに強制され、長いページは自動の高さになります。

于 2013-08-02T14:56:41.250 に答える
0

投稿していただきありがとうございます。私は同じ問題を抱えていました。100% 幅に設定されたコンテンツのコンテナ div に背景画像を追加することで解決しました。コンテナーはフッターの前に閉じますが、画像をページの下部に移動する必要がある場合は、フッターの外側に配置することもできます。私は自分のコンテンツの右下に移動したいだけでした。

これが私のdiv構造です：

<html>                    Background image
<body>                    Padding
<div id="outerWrapper">   Background applied outside content
<div id="borderWrapper">  Contains content
<div id="contentWrap">    Sets up container positioning for child elements
于 2014-03-16T16:40:30.690 に答える
0

body の高さを常に 100% に設定すると、機能するはずです。

明確にするために：次に、すでに試したのとほぼ同じように、html要素とbody要素に背景画像を含めることができます：

html {
height: 100%;
background: url(html.png) bottom right no-repeat;
padding: 0;
margin: 0;
}

body {
padding: 0;
margin: 0;
height: 100%;
background: url(body.png) bottom right no-repeat;
}

もう少しテストしたところ、IE10 の Internet Explorer 5 quirks モードでは動作しないようですが、奇妙なレガシー製品を使用しているようには見えないので、それが問題にならないことを願っています。

紫色の四角が html-background-image で、赤い四角が body-background-image です。

紫色の四角が html-background-image で、赤い四角が body-background-image です。

于 2013-01-17T11:10:03.610 に答える