背景图像不适用于 Chrome

Question

我有一张背景图片，它在 Firefox 上显示良好，但在 Google Chrome 上根本不显示。没看懂。。。非常感谢。

编辑：我看到有人告诉我答案已经在别处但没有。我没有添加块，所以这不是同一个问题。还是谢谢你。

CSS :

    #section2{
        background: url(../images/references.png) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        position:relative;
    }

HTML :

<div id="section2">

</div>

Answer 1

我不知道你如何用你给我们看的代码在 firefox 上看到你的图片。

Div 尺寸无法调整为 background-image 尺寸。这意味着如果您的 div 的高度和宽度为 0，我们将无法看到 background-image.

如果您在 div 中添加内容或在 CSS 中添加宽度和高度，您会看到图像出现。

 #section2 {
  background: url('https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: relative;
  height: 500px;
  width: 500px;
}

<div id="section2"></div>

Answer 2

使用 background-image: 属性

#section2{
        background-image: url(../images/references.png); 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        position:relative;
    }

Answer 3

div 中没有高度/没有内容，因此您应该看不到任何内容。反正代码没问题

#section 2 {
height: 200px;
width: 200px;
}

将此添加到您的 css

背景图像不适用于 Chrome

background-image doesn't work with Chromes

html

css

google-chrome

background-image