57

こんにちは、ページにいくつかの div があり、それらの背景画像を展開して div 全体をカバーし、それを展開してビューポートの幅を埋めることができます。

明らかbackground-size: coverに、iOS デバイスで予期しない動作をします。修正方法の例をいくつか見てきましたが、私の状況ではそれらを機能させることはできません。理想的には、余分なタグを HTML に追加したくない<img>のですが、それが唯一の方法である場合は追加します。

これが私のコードです：

.section {
  margin: 0 auto;
  position: relative;
  padding: 0 0 320px 0;
  width: 100%;
}

#section1 {
  background: url(...) 50% 0 no-repeat fixed;
  background-size: cover;
}

#section2 {
  background: url(...) 50% 0 no-repeat fixed;
  background-size: cover;
}

#section3 {
  background: url(...) 50% 0 no-repeat fixed;
  background-size: cover;
}
<body>
  <div id="section1" class="section">
    ...
  </div>
  <div id="section2" class="section">
    ...
  </div>
  <div id="section3" class="section">
    ...
  </div>
</body>

問題は、ブラウザの可変幅と div 内のコンテンツの可変高さを考慮して、セクション div を完全に覆うように背景画像を取得するにはどうすればよいかということです。

4

10 に答える 10

144

私は最近同様の問題を抱えていて、それが原因ではないことに気付きましたbackground-size:coverがbackground-attachment:fixed.

iPhone のメディア クエリを使用し、background-attachmentプロパティを に設定して問題を解決しましたscroll。

私の場合：

.cover {
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;

    @media (max-width: @iphone-screen) {
        background-attachment: scroll;
    }
}

編集：コードブロックはLESSにあり、事前定義された変数を想定しています@iphone-screen. お知らせありがとうございます@stephband。

于 2014-01-30T12:39:19.267 に答える
6

ここにも投稿: "background-size: cover" はモバイル画面をカバーしていません

これは、Android 4.1.2 および iOS 6.1.3 (iPhone 4) で動作し、デスクトップ用のスイッチです。レスポンシブ サイト用に書かれています。

念のため、HTML の頭の中で、次のようにします。

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

HTML:

<div class="html-mobile-background"></div>

CSS:

html {
    /* Whatever you want */
}
.html-mobile-background {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 125%; /* To compensate for mobile browser address bar space */
    background: url(/images/bg.jpg) no-repeat; 
    background-size: 100% 100%;
}

@media (min-width: 600px) {
    html {
        background: url(/images/bg.jpg) no-repeat center center fixed; 
        background-size: cover;
    }
    .html-mobile-background {
        display: none;
    }
}
于 2013-10-06T05:01:01.637 に答える
5

これを解決しようとする回答がネット上にありますが、どれも正しく機能しませんでした。目標: に背景画像を配置し、メディア クエリ、ハックオーバーレイを使用せずにモバイルbodyで作業する。background-size: cover;overflowsz-index: -1; position: absolute;

これを解決するために私がしたことは次のとおりです。キーボードドロワーがアクティブな場合でも、Android の Chrome で動作します。誰かがiPhoneをテストしたいなら、それはクールでしょう：

body {
    background: #FFFFFF url('../image/something.jpg') no-repeat fixed top center;
    background-size: cover;
    -webkit-background-size: cover; /* safari may need this */
}

これが魔法です。html実際のビューポートに対する比率が強制された高さを持つラッパーのように扱います。従来のレスポンシブ タグをご存知<meta name="viewport" content="width=device-width, initial-scale=1">ですか? これが が使用される理由vhです。また、表面的にはbody、これらのルールを取得する必要があるように見えますが、キーボードが開いたときのように高さが変化するまでは問題ないように見えるかもしれません。

html {
    height: 100vh; /* set viewport constraint */
    min-height: 100%; /* enforce height */
}
于 2016-07-22T17:37:47.473 に答える
1

背景サイズの正しいコードは次のとおりです。

<div class="html-mobile-background">
</div>

<style type="text/css">
html {
    /* Whatever you want */
}
.html-mobile-background {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* To compensate for mobile browser address bar space */
    background: url(YOUR BACKGROUND URL HERE) no-repeat; 
 center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
 background-size: 100% 100%
}
</style>
于 2015-08-03T15:14:15.077 に答える
0

Stephen Gilbert の Web サイトで次の情報を見つけました - http://stephen.io/mediaqueries/。これには、追加のデバイスとその向きが含まれます。私のために働く！

注: 彼のサイトからコードをコピーする場合は、使用しているエディターに応じて余分なスペースを編集する必要があります。

/*iPad in portrait & landscape*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* STYLES GO HERE */}

/*iPad in landscape*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* STYLES GO HERE */}

/*iPad in portrait*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* STYLES GO HERE */ }
于 2014-04-04T15:58:16.893 に答える
0 
@media (max-width: @iphone-screen) {
  background-attachment:inherit;    
  background-size:cover;
  -webkit-background-size:cover;
}
于 2016-05-12T07:44:06.677 に答える
0

Safari バージョン < 5.1の場合、css3 プロパティbackground-sizeは機能しません。そのような場合には、 が必要webkitです。

したがって、属性を使用してbackground-size-webkit-background-sizeを指定する必要があります。

したがって、 を使用します-webkit-background-size:cover。

参考- webkitを使ったSafariのバージョン

于 2013-12-15T05:50:38.867 に答える
-1

次の CSS コード例は iPad をターゲットにしています。

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

    html {  
        height: 100%;
        overflow: hidden;
        background: url('http://url.com/image.jpg') no-repeat top center fixed;
        background-size: cover; 
    }

    body {  
        height:100%;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
    }

}

参考リンク：https ://www.jotform.com/answers/565598-Page-background-image-scales-massively-when-form-viewed-on-iPad

于 2016-06-27T08:42:15.103 に答える
-2 
html body {
  background: url(/assets/images/header-bg.jpg) no-repeat top center fixed;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;

  -webkit-background-size: auto auto;
  -moz-background-size: auto auto;
  -o-background-size: auto auto;
  background-size: auto auto;
}
于 2014-11-11T12:25:16.130 に答える