Question

HTML：

`<div class="food-imagesM imagecontainer">
<!--Page info decoration etc.-->
</div>`

CSS：

`.food-imagesM.imagecontainer{
    background-image: url("/Images/Caribbean-food-Menu.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 100px;
    margin: 0px;
    padding-bottom: absolute;
 }`

当我在chrome中打开我的程序时，一切都显示但背景图像没有显示我已正确链接所有内容但有时我的背景图像没有显示...我该如何解决这个问题？我有sevearal图像容器，但它们没有相同的图像。

Answer 1

你的选择器不对。只需使用：.imagecontainer。

.imagecontainer{
    background-image: url("/Images/Caribbean-food-Menu.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 100px;
    margin: 0px;
    padding-bottom: absolute;
 }

Answer 2

`.food-imagesH.imagecontainer{
    background-image: url("/Images/Caribbean-food-Menu.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 100px;
    margin: 0px;
    padding-bottom: absolute;
 }`

看起来您正在尝试选择两个类来添加CSS。如果这是正确的，则CSS中的类名称不正确。将food-imagesM改为food-imagesH

Answer 3

改变食物 - 图像M whit food-imagesH 除此之外，您必须为班级添加宽度和高度。如果不在div中添加宽度和高度或内容，则其大小应为0 * 0.

你如何修复背景图像没有加载？

3 个答案: