Question

我有一个背景图片，该图片在Firefox上显示得很好，但在Google Chrome浏览器上却完全没有。我不明白...非常感谢。

edit：我看到有人告诉我答案已经在其他地方了，但没有。我没有添加块，所以它不是同一个问题。还是谢谢你。

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大小无法调整为背景图像大小。这意味着，如果您的div的高度和宽度为0，我们将无法看到背景图片。

如果将内容添加到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：属性

#!/bin/sh
for file in *.jpeg; do
djpeg -pnm -outfile "$file".pnm  "$file"
pnmtopng  *.pnm
done

Answer 3

div中没有高度/没有内容，因此您什么也看不到。代码还是可以的

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

将此添加到urss

背景图片不适用于Chrome浏览器

3 个答案: