13

モバイル Web ページで背景を覆うセクションを作成したいので、次の CSS コードを使用していました。

#section1{
    background: url("background1.png") auto 749px;
    height: 749px;
}

背景は Android (Chrome、Firefox ...) では正しく表示されますが、iPhone または iPad (Safari、Chrome iOS ...) ではまったく表示されません。DOM の準備ができたら、jQuery を使用してこれらのプロパティを設定しようとしましたが、うまくいきませんでした。サイズが問題になる可能性があると読みましたが、画像は約 700kB (1124x749px) であるため、Safari Web コンテンツ ガイドのルールを満たしているはずです。問題はどれですか？

4

13 に答える 13

17

私の問題は、iOS が をサポートしていないことでしbackground-attachment: fixedた。その行を削除すると、画像が表示されました。

ただし、固定の背景画像には回避策があるようです: iOS で修正された背景の添付ファイルを複製する方法

于 2015-07-01T20:48:25.037 に答える
12

CSS ルールに問題があります:

-property が-propertyの後にbackground-size来る簡略表記を使用し、 .background-position/

あなたがしようとしているのは位置を設定することですがauto、有効な値ではないため失敗します。

簡略表記で機能させるには、次のようにする必要があります。

background: url([URL]) 0 0 / auto 749px;

と呼ばれる値があることにも注意してくださいcover。これは、ここで適切でより柔軟な場合があります。

background: url([URL]) 0 0 / cover;

Firefox 18 以降、Chrome 21 以降、IE9 以降、Opera でサポートされているため、簡略表記でののサポートもあまり広くありません。background-sizeSafari ではまったくサポートされていません。これに関しては、常に次を使用することをお勧めします。

background: url("background1.png");
background-size: auto 749px; /* or cover */

その動作を示すために、いくつかの例とデモを次に示します。たとえば、Firefox では最初の画像を除くすべての画像が表示されることがわかります。一方、Safari は最後のものだけを表示します。

CSS

section {
    width: 200px;
    height: 100px;
    border: 1px solid grey;
}

#section1 {
    background: url(http://placehold.it/350x150) auto 100px;
}

#section2 {
    background: url(http://placehold.it/350x150) 0 0 / auto 100px;
}

#section3 {
    background: url(http://placehold.it/350x150) 0 0 / cover;
}

#section4 {
    background: url(http://placehold.it/350x150) 0 0;
    background-size: cover;
}

デモ

購入前にお試しください

参考文献

MDN CSS リファレンス「background」
MDN CSS リファレンス「background-size」

<'background-size'> background-size
を参照してください。このプロパティは、background-position の後に「/」文字で区切って指定する必要があります。

于 2013-09-25T09:08:04.760 に答える
7

これが誰かの絶望の助けになれば幸いです。私の場合、大きすぎるのは画像のサイズだったので、iPad はそれを読み込めませんでした (そして、実際には正しかったのです)。

サイズと品質を下げることで、読み込みの問題が解決しました。

于 2014-07-15T19:27:13.543 に答える
6

省略形で背景を適切に使用しようとすると、問題は解決しませんでした。background プロパティを分割すると機能します。

#section1{
    background: url("background1.png");
    background-size: auto 749px;
    height: 749px;
}
于 2013-09-25T08:16:31.263 に答える
0

誰も具体的にこれを言っているのを見たことがありませんが、幅も定義する必要があります。背景サイズを「含む」に設定したので、コンテナの寸法を知る必要があります。

一度やると、背景は期待どおりにレンダリングされました。

@media only screen and (max-width:599px) {
  [id=banner] td { width:480px !important; height:223px !important; background:url('image') no-repeat 0 0 !important; }
}

@media only screen and (max-width:479px) {
  [id=banner] td { width:320px !important; height:149px !important; background:url('image') no-repeat 0 0 !important; background-size:contain !important; }
}

注: バックグラウンド URL は、iPhone 5 (iOS7) で機能するように、両方のブレークポイントに対して定義する必要があります。

于 2015-03-24T20:53:21.237 に答える
0

背景画像がページからはみ出していた負のテキスト インデントがあったため、それは color:Transparent です。

于 2014-12-11T07:20:15.447 に答える
0

アイコンが表示されるように設定input { opacity: 0; }する必要がありました。input + span {}

于 2019-11-19T00:10:22.430 に答える