2

このページには 2 つの背景画像があります。

(1) の背景画像として設定されている青いサンバースト<html>

html {
    background: url("BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg") no-repeat fixed center center / 100% auto transparent;
    outline: 0 none !important;
}

(2) すべてのページの下部に表示される空中の腕の群れを示す画像。スティッキーフッターソリューションを使用して、これを各ページの下部に貼り付けます

通常のブラウザーの幅ではすべて正常に動作しますが、ブラウザーの幅が約 500px を下回ると、上部に空白が表示され始めます。

ここに画像の説明を入力

そして一番下に

ここに画像の説明を入力

すべてのページの。以前私が使用した

background-size: cover;

サンバースト画像の場合、これにより Web サイトが iOS 6 のブラウザーを (深刻に) クラッシュさせたので、このルールを使用せずにこれを修正する方法を見つける必要があります。

4

4 に答える 4

2

空白はcenter center、CSSで定義されているようにブラウザが画像を配置するために発生します。

html {
    background: url(BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg) no-repeat center center fixed;
    background-size: 100%;
    outline: 0!important;
}

background-size: 100% 100%現在の設定background-size: 100%;は100%幅と 自動高さであるため、解決策は設定するだけだと思いました。しかし、Chromeにはバグがあります-background -size：100％100％; Chromeでは正しく機能しません。その質問には、役立つ可能性のある回避策の回答があります。

ただし、おそらく@mediaルールの1つでbackground-size: 100%;が削除された場合、期待どおりに背景がページを埋めます。width < 500pxウィンドウが画像を引き伸ばすために画像の幅よりも大きい場合でも、このルールは必要です。

于 2013-03-23T22:26:17.117 に答える
2

JS ソリューションに反対しない場合は、Backstretchを使用してみてください。

于 2013-03-23T22:12:27.917 に答える
0

ここで、この解決策を持っています...

このファイルでは...

http://festivals.ie/static/C5z61WeZeCfyTRbmu6lNPsxXxwhibmxExq6ADwtSPjh.css

793行目、

このコードはその行の最後の部分にあります...

html{background:url(BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg) no-repeat center center fixed;
background-size:100%;
outline:0!important;}

このプロパティを追加します：background-position：0px 0px;

コードの作成：

 html{background:url(BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg) no-repeat center center fixed;
background-size:100%;
outline:0!important;
background-position: 0px 0px;}

そして、fyiは、andybが指摘したように、空白は上部の位置を中央に置いたままの画像であり、それによって空白が表示され始めているように見えます。

あなたがポイントを得ることを願っています。

よろしく

于 2013-03-23T22:54:09.110 に答える
0

background-size を 100% より大きい値に設定します。200-250% がその領域をカバーすると思います。

background-size:220%;

これが持つ副作用の 1 つは、サイズが原因でわずかな遅延が発生することです。

于 2013-03-23T22:28:22.793 に答える