29

他の誰かがこの問題を抱えていますか? 私は生計を立てるために Web サイトを作成しており、css プロパティを使用しているものもありますbackground-size: cover。約 1 週間前に突然、このプロパティを持つすべてのサイトが Google Chrome で正しく表示されなくなりました。(他のすべてのブラウザーは正常に動作しています。) 他の誰かがこれを経験していますか? それは私のGoogle Chromeだけですか、それとも何か変更がありましたか? 背景は一週間ほど前まではちゃんと表示されていたので、何も変えていません。彼らはちょうどどこからともなく、適切に表示されなくなりました....

4

11 に答える 11

16

!important のみを使用する必要があります。

background-size: cover !important;
于 2013-04-10T13:06:19.907 に答える
14

Chromeでもこの問題に遭遇しました。

上記の答えはどれもうまくいきませんでした。具体的には、<body>要素の背景をに設定しようとしていましたbackground-size: cover。ただし、背景画像が垂直方向に伸びてページを埋めることはありません。

試行錯誤の末、<html>要素の幅と高さを 100% に設定すると、Chrome で問題が解決することがわかりました。(実際には、<body>要素の幅と高さを変更しても効果がないように見えました。)

私のcssには、問題を修正するための次のルールがあります。

html {
  width: 100%;
  height: 100%;
}
于 2014-02-21T04:07:45.363 に答える
1

Google Chrome の CSS ハックを行う必要があります。

Use body:nth-of-type(1) .elementOrClassName{property:value;}

グーグルクローム専用。

あなたの場合、

nth-of-type(1) .elementOrClassName{background-size:80px 60px;}
于 2012-08-04T21:21:26.613 に答える
1

以下は問題の解決策ですが、万人向けではありません。この解決策は、著者の問題を経験している少数の人々に役立つと思います。

背景画像に比べてコンテナーが縦方向に小さすぎる場合、背景サイズ オプションは chrome で機能しなくなる可能性があります。

私は、高さ 7 ピクセルの div に大きな背景画像の小さな部分を配置しなければならない状況にありました。

Chrome デバッガーで、div の高さを 9 ピクセルに変更すると、background-size が所定の位置に「スナップ」されました。

私の最終的な解決策は、この問題に遭遇しないように div を再構築することでした。

この解決策が役立つかどうかを確認するには、Chrome デバッガーで div を拡大します。ある時点で background-size が所定の位置に収まる場合は、これが問題であることがわかります。

于 2013-12-06T15:26:47.073 に答える
1

GCだけでなく、FFとOperaでも突然同じ問題が発生しました。背景のランダムな画像を取得するためにphp関数を使用していましたが、これが私が持っていたものです....

CSS:

.main-slideshow .video img  {   
  cursor:pointer;
  width:550px !important;       
  height:340px !important;   
  background-repeat: no-repeat; 
  -moz-background-size:cover;
  -webkit-background-size: cover; 
  -o-background-size: cover;
  background-size: cover;   }

および HTML/PHP:

$result .='<img alt="" style="background:url('.$thumbnail.')" src="/images/play1.png" /> ';

数日間動作していましたが、突然動作background-repeatしbackground-sizeなくなりました。今朝、次の変更が GC (v21)、FF (v14)、Opera (v12)、Safari (v5.1.7) で完全に機能することがわかりました...IE ではまだうまくいきません:(

CSS:

.main-slideshow .video img  {   
  cursor:pointer;
  width:550px !important;       
  height:340px !important;   
  -moz-background-size:cover;
  -webkit-background-size: cover; 
  -o-background-size: cover;
  background-size: cover;   }

HTML/PHP:

    $result .='<img alt="" style="background-image:url('.$thumbnail.')" style="background-repeat: no-repeat" style="background-size:cover" src="/images/play1.png" />';

それはお粗末な解決策かもしれませんが、私にとってはうまくいっています（これまでのところ）これが誰かに役立つことを願っています:)

于 2012-08-06T16:32:49.927 に答える
0

この background-size:contain; を試してください。

于 2014-02-04T19:51:42.910 に答える
0

私にとって、以下はChrome、IE 8、IE 9で機能しました：

.itemFullBg{
background:url('image/path/name.png') no-repeat;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size:100% 100%;      
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
    (src='image/path/name.png',sizingMethod='scale');
}
于 2014-04-23T06:52:39.583 に答える
-3

使用する代わりに:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

使用する：

-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
于 2013-04-04T13:13:44.930 に答える