web-dev-qa-db-ja.com

背景サイズ：Google Chromeでカバーが突然機能しなくなりましたか？

他に誰かがこの問題を抱えていますか？私は生活のためのウェブサイトを作成し、cssプロパティbackground-size: coverの使用を採用している人もいます。約1週間前の突然、このプロパティを持つすべてのサイトがGoogle Chromeで正しく表示されなくなりました。 （他のすべてのブラウザは正常に動作しています。）他の誰かがこれを経験していますか？それは私のgoogle chromeまたは何か変更されただけですか？背景は約1週間前まで適切に表示されていましたが、change何もしませんでした。表示が停止しただけです。きちんと、どこからともなく見えます...

google-chromecsscover
28
malfy

ベストプラクティス：常にbackground-imageを最初に設定し、次にbackground-sizeを設定します。

30
malfy

使用する必要があるのは！important：

background-size: cover !important;
15
gregs67

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

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

試行錯誤の結果、<html>要素の幅と高さを100％に設定すると、Chromeの問題が解決したことがわかりました。 （それだけの価値があるため、<body>要素の幅と高さを変更しても効果がないように思われました。）

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

html {
  width: 100%;
  height: 100%;
}
14
wrydere

あなたはグーグルクロームのためにCSSハックをしなければなりません。

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

グーグルクロームのみ。

あなたの場合、

nth-of-type(1) .elementOrClassName{background-size:80px 60px;}
1
Josua Marcel Chrisano

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）で次の変更が完全に機能していることがわかりました... w/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" />';

それはお粗末な解決策かもしれませんが、それは私のために働いています（これまでのところ）これが誰かを助けることを願っています:)

1
AlwaysANovice

古い質問ですが同様の問題があり、&nbsp;を適用する空のdivにbackground-size: coverを追加する必要があることがわかりました。

1
Dave Bergschneider

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

chromeで、背景画像と比較してコンテナーが垂直方向に小さすぎる場合、background-sizeオプションが機能しなくなる可能性があります。

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

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

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

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

1
Brian Webster

私にとって、以下は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');
}
0
Amit Bhagat

タグの高さを設定することで問題を解決できます。たとえば、背景画像のあるページがある場合は、次のようにCSSでhtmlタグとbodyタグの高さを設定します。

html { height:100%;  min-height:100%;  } body{  min-height:100%;  }

お役に立てれば

0
Michele Caggiano

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

0
Vinay Mehta