CSS 背景图片未按预期工作

Question

由于某些原因，通过 background 设置的图片背景无法正常工作。

Chrome 和 Firefox 中的开发者工具都显示图像背景设置和图像的 link 工作正常，但由于某种原因它没有显示。

.footer-mold { 
    background: url('http://www.example.com/images/footer-bg.jpg') no-repeat left top;
}

Answer 1

.footer-mold 的高度是 0，因为里面的所有东西都是浮动的，你没有清除任何东西。

一个解决方案是添加

.footer-mold::after {
    clear: both;
    display: block;
    content: '';
}

到样式表。

Answer 2

有时图片文件名中有一个space，它会使您的图片消失。确保在上传过程之前重命名您的图像文件。

例如："example image.jpg" 最好将其重命名为："example-image.jpg" 或 "example_image.jpg"

CSS background image is not working as expected