1

iPhone/Android用のTwitterモバイルWebサイトの背景画像（スクリーンショット）に似た効果を実現したい。

私のソリューションは、コンテンツが画面に収まる場合に機能しますが、スクロールがあると壊れます。

これは私が使用しているCSSです：

.welcome body{
  background: url(http://i.imgur.com/DQ59KbW.jpg) no-repeat top left;
  z-index: -1;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  background-origin: padding-box;
  -webkit-background-origin: padding-box;
  background-size: cover;
  -webkit-background-size: cover;
}

html.welcome, .welcome body{
  height: 100%;
}
4

2 に答える 2

1

スクロールしないように背景を設定する必要があります。

background-attachment: fixed;

Re: あなたのコメント、CSS を次のように変更します。

html { 
    background: url(http://i.imgur.com/DQ59KbW.jpg) no-repeat center center fixed; 
    -o-background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

これは、スクロールではなく、任意のサイズでフルスクリーンになります。

唯一の注意点は、CSS3 以外のブラウザーでは動作しないことです (Chrome、Firefox 3.6 以降、IE8 以降、Opera 10 以降で動作するはずです)。

于 2013-04-21T21:47:45.627 に答える
0

どのような動作を意図していますか? コンテンツが背景画像の高さよりも大きい場合、うまくいきません。position:fixed をボディに追加することができます。

于 2013-04-21T21:49:47.507 に答える