2

私は自分のウェブサイトに適用しようとしているこのデザインを与えられました。この要素には、ページの下部にくっつく背景画像 (宙に浮いている手) があることに注意してください。<html>

ただし、css ファイルをアプリケーションに移行すると、何らかの理由でこの画像がページの途中に表示されます。関連するCSSを確認しましたが、どちらの場合も次のとおりです。

html {
 background-attachment: fixed;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("../../img/bg.svg");
    background-origin: padding-box;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    outline: 0 none !important;
}

では、なぜここでは画像がページの一番下にくっついているのに、ここではページの途中まで表示されているのでしょうか。

4

4 に答える 4

4

とをheight: 100%設定しました。これは通常、フルハイトの要素を持つことができるようにするために行われます。しかし、この場合、これが問題の原因であることが証明されています。これを削除すると問題が解決します。htmlbody

Firebug または Chrome Inspector をチェックインすると、次のようなものが表示されます。

html, body {
    height: 100%;
}

それを除く。またはスタイルシートからオーバーライドします。

于 2012-12-01T17:16:59.243 に答える
3

body { height: 100% }スタイリングのため、2 番目のサイトでは機能しません。

static/bundle-bundle_responsive_head.css:

html, body {
    height: 100%;
}
于 2012-12-01T17:15:09.737 に答える
2

最初のリンクの計算された高さは、画像が下部になるように設定されているように見えますが、画像が途中で表示されるリンクの場合、計算された高さははるかに低くなります。 height: 170px;に比べheight: 2006px;

何が高さを設定しているのかわかりませんが、それを整理することで画像の問題が解決します

編集：実際には、これらのサイトの1つだけにあるこのルールにあるようです：

media="screen, projection"
html, body {
   height: 100%;
}
于 2012-12-01T17:14:38.790 に答える
2

一番下にくっついていないのは、実際には body タグの背景画像のようです。bundle-bundle-responsive-head.cssの body ルールをオフにheight: 100%すると修正されますが、それがサイトの他のものにどのように影響するかはわかりません。

これは、Chrome の DOM インスペクタを使用して、さまざまな要素のルールをオン/オフして、それらがどのような影響を与えるかを確認することでわかりました。

于 2012-12-01T17:16:19.813 に答える