CSS：Clearfix背景图片不起作用

Question

我已就此主题搜索其他问题，但找不到任何匹配的内容。 我的index.html中有3张图片显示得很好，但是我在播放背景jpg时遇到了麻烦。

 <div class="cf">
    <div class="box">
        <a href="">
            <img src="images/pizza.jpg"/>
            <p>Vegetarian</p>
        </a>
    </div>
    <div class="box">
        <a href="">
            <img src="images/pasta.jpg"/>
            <p>5 Minuts Meals</p>
        </a>
    </div>
    <div class="box">
        <a href="">
            <img src="images/diet.jpg"/>
            <p>Diet Recipes</p>
        </a>
    </div>
</div>

的style.css

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

#main {
    background-image: url("images/dishes.jpg");
    height: 438px;
}

Answer 1

将您的代码更改为此代码，因此它是通用的。

*{
 background-image: url("images/dishes.jpg");
}

希望这有帮助！

Answer 2

显然，css文件夹中的文件扩展名存在问题。 一旦我从css文件夹中取出样式表，它就可以正常工作。