Question

还有其他人有这个问题吗？我创建网站为生，有些人使用css属性background-size: cover。大约一周前，所有具有此属性的网站都不再显示在Google Chrome中。（所有其他浏览器都运行正常。）还有其他人遇到过这种情况吗？它只是我的谷歌铬或做了一些改变？因为背景在大约一周前正常显示，而且我没有更改任何东西。他们刚刚停止正常展示，似乎无处不在......

Answer 1

最佳做法：始终先设置背景图像，然后再设置背景尺寸。

Answer 2

你只需要使用！important：

background-size: cover !important;

Answer 3

我也在Chrome中遇到过这个问题。

上述答案都不适合我。具体来说，我试图将<body>元素背景设置为background-size: cover。但是，背景图像永远不会垂直延伸以填充页面。

经过一些反复试验，我发现将<html>元素的宽度和高度设置为100％可以解决Chrome中的问题。（对于它的价值，更改<body>元素的宽度和高度似乎没有效果。）

在我的CSS中，我有以下规则来解决问题：

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

Answer 4

你必须为谷歌浏览器做CSS黑客攻击。

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

仅适用于Google Chrome。

对于你的情况，

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

Answer 5

我突然遇到了同样的问题，不仅是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" />';

可能是一个糟糕的解决方案，但它对我有用（到目前为止）希望这有助于一个人：）

Answer 6

以下是该问题的解决方案，但不适合所有人。我估计这个解决方案将帮助少数人遇到作者的问题。

如果您的容器与背景图像相比太垂直，那么background-size选项可以停止使用chrome。

我遇到的情况是，我必须将一小部分大背景图像放在一个7像素高的div上。

在Chrome调试器中，将div高度更改为9像素会将背景大小“快照”到位。

我的最终解决方案是重构我的div，以便我不会遇到这个问题。

要查看此解决方案是否对您有所帮助，请在Chrome调试器中放大您的div。如果在某些时候，背景大小卡入到位，那么您就知道这是问题所在。

Answer 7

旧问题，但有类似的问题，事实证明我需要添加 并将background-size: cover添加到我正在应用Parameters: {"utf8"=>"✓", "authenticity_token"=>"adjbzaCNxfw==", "serialized_products"=>{"product_id"=>"2", "location_id"=>"1", "serial"=>"1234567890"}, "commit"=>"Save changes"}的空div中。

Answer 8

试试这个背景尺寸：含有

Answer 9

对我来说，以下是为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');
}

Answer 10

您可以通过设置标签的高度来解决此问题。例如，如果您的网页上有背景图片，请在CSS中设置html和body标签的高度，如下所示：

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

希望这会有所帮助

Answer 11

而不是使用：

-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%;

背景大小：封面突然停止在谷歌浏览器中工作？

11 个答案: