29

还有其他人有这个问题吗？我以创建网站为生，有些网站使用 css 属性background-size: cover。突然之间，大约 1 周前，所有具有此属性的网站都不再显示在 Google Chrome 中。（所有其他浏览器都可以正常工作。）还有其他人遇到过这种情况吗？它只是我的谷歌浏览器还是有什么改变？因为直到大约一周前背景才能正常显示，而我没有更改任何内容。他们只是停止正常显示，似乎无处不在......

4

11 回答 11

34

最佳实践：始终先设置背景图像，然后设置背景大小。

于 2014-02-04T19:54:59.097 回答
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

你必须为谷歌浏览器做 CSS hack。

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

我突然遇到了同样的问题，不仅是 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 回答
1

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

如果与背景图像相比，垂直容器太小，则 background-size 选项可能会停止在 chrome 中工作。

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

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

我的最终解决方案是重组我的 div，这样我就不会遇到这个问题。

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

于 2013-12-06T15:26:47.073 回答
1

老问题，但有类似的问题，结果我需要添加&nbsp;到我申请的空 divbackground-size: cover中。

于 2016-10-17T17:38:54.627 回答
0

试试这个背景大小：包含；

于 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 回答
0

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

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

希望这可以帮助

于 2018-09-09T16:50:44.277 回答
-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 回答