32

私はレスポンシブ デザインに取り組んでおり、クラス "bgMainpage" には背景画像がありますが、すべてのデバイスの Safari に表示されません。クライアントが希望する背景サイズのカバーを適用しました。ブラウザ固有の CSS も追加しましたが、Safari にも表示されるように他に何をすればよいかわかりません。Chrome、FF、IEは画像を問題なく表示します。何か案は ？

プロジェクト リンク

CSS :

.bgMainpage{
    background:url("../images/bg.jpg") no-repeat scroll right top #000000;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size:cover;
    background-size: cover;
}
4

18 に答える 18

42

Safari には、いくつかの基準が満たされている場合に、特定の種類の jpg/JPEG 画像が背景に表示されないという明らかなバグがあります。オンラインで使用するために、プログレッシブ JPEG と呼ばれる jpg 画像のタイプがあります。通常の jpg 画像は画像データを上から下にエンコードし、オンラインでそのように読み込まれるのを確認できます。一方、プログレッシブ JPEG は、画像を段階的に詳細にエンコードします。これは、最初はあいまいにロードされ、その後より明確になることを意味します。これはオンラインの方が見栄えが良いと考える人もいるため、使用されています。一部の画像オプティマイザーは、オンラインで使用するために自動的に jpg をプログレッシブにします。

私の経験では、次の条件のいくつかが満たされている場合、Safari は jpg を表示しません。

  • プログレッシブ エンコーディングが使用されます
  • 画像は背景です（要素またはページ全体の）
  • 画像が大きい (正確な大きさはわかりませんが、幅が数千ピクセルの画像で問題が発生しました)
  • おそらく他のもの、私はこのバグを完全に調査していません

Safari 以外のどのブラウザでもこれを再現できませんでした。

これを修正するには、プログレッシブ形式 (Photoshop などにはこのためのセレクターがあります) でないことを確認して画像を再保存するか、別の形式 (gif、png など) を使用します。

于 2013-07-16T04:19:14.070 に答える
18

I have the same issue and I have solved this issue by changing:

background: url("images/backgroundimage.jpg") no-repeat fixed 0 0 / cover rgba(0, 0, 0, 0);

to:

    background: url("images/backgroundimage.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;

and that is working good in safari now :)

于 2014-05-24T06:12:36.117 に答える
13

私は Google 検索ページからここにたどり着いたので、この問題が他の人に発生した場合に備えて、コードを再確認してください。Safari は正しいコードについて非常にうるさい場合があるため、ここで質問に正しく入力されていても、それを再確認してください。終わりのかっこを忘れると、Chrome などの他のブラウザーでは、終わりのかっこを入れてページを正しくレンダリングするつもりであると見なされて表示されません。すべてのコードが適切に開閉されていることを確認してください:

<div style="background-image:url('../images/bg.jpg');">HEY</div>

于 2015-12-19T03:41:14.193 に答える
5

::: を変更または削除してみてください

background-attachment:fixed;

サファリで私のために働く.....

于 2016-06-17T06:21:51.060 に答える
3

画像形式をjpegからgifに変換したところ、うまくいきました。したがって、最終的な CSS は次のとおりです。

.bgMainpage{
    background:url("../images/bg.gif") no-repeat scroll right top #000000;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size:cover;
    background-size: cover;
}
于 2013-06-27T11:48:45.360 に答える
1

写真が間違って保存されている可能性があります。私はかつてこの問題を抱えていて、以下を変更しなければなりませんでした：

Photoshop で写真を開き、「cmyk」で保存します。このオプションは、ビューで変更可能で、configure-proof、cmyk-colors である必要があります (申し訳ありませんが、私の Photoshop はすべてドイツ語です)。

お役に立てれば

于 2013-06-27T11:24:44.360 に答える
1

次のコードを試してみてください。幅と高さ、および URL を変更する必要があるかもしれません。

.gallery {
   height: 190px;
   width: 940px;
   margin-bottom: 13px;
   background-color: transparent;
   background-image: url("/img/user/admin/photo.jpg");
   background-repeat:no-repeat;
   background-position: center bottom;
   background-attachment: scroll;
   background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
}

于 2017-07-14T13:48:52.013 に答える
0

私は同様の問題を抱えていましたが、タンブラーによって生成されていたため、画像を制御できなかったため、プログレッシブな提案が機能しませんでした。私は自分のコードと提案された他のものを再確認しました。いくつかの頭痛を取り除くのに役立つことを願っています.

于 2016-12-14T17:31:41.703 に答える
0

私は同じ問題を抱えていましたが、ここにある他の解決策はどれも問題を解決しませんでした。私にとっては、div でラップされたアンカーに背景画像がありました。Safari 6 を除いて、すべてのブラウザは背景画像を正常に処理しました。私にとっての修正は、div に position:relative を設定し、アンカー リンクに position:absolute を設定することでした。

于 2014-12-23T00:36:43.307 に答える
0

このコードを試してください。

.bgMainpage{
    background:url(../images/bg.jpg) no-repeat scroll right top #000000;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size:cover;
    background-size: cover;
于 2013-06-27T13:34:32.883 に答える
0

私の問題は、短い形式のCSSで

background: url('image.png') no-repeat scroll center center #mycolor;

背景色でした。解決策は、ここのように別の要素スタイルに入れるだけでした

background: url('image.png') no-repeat scroll center center;
background-color: #mycolor;
于 2020-02-28T11:29:37.970 に答える