提问者:小点点

需要帮助为什么背景图像没有显示在div上?


帮助我真的不知道该做什么,我确实在W3学校的网站上查看了所有关于css和HMTL的东西,但是没有任何东西起作用。 文件路径正确,但div类=“mainbanner”的背景不起作用。

null

    <html>
    <head>
    <style>
    * {
    background-color: black;
    margin: 0;
    padding: 0;
    }

    .mainBanner {  
    background-image: url(/images/background.jpg);
    color: #ffffff;
    text-align: center;
    height: 700px;
    }
    </style>
    </head>

    <div class="container mainBanner">
    <h1>Welcome to The Travellers Website</h1>
    <h4>You're all in one solution for perfect travels. Make memories and take          step across 
    islands you've never seen before.</h4>
    </div>
    </html>

<!--Is the background image covered by the * selector when the bg color is applied? This imgae from the .mainBanner class doesnt load even the file is correct-->

null


共2个答案

匿名用户

假设图像位于正确的位置,您可能会收到问题,因为您还没有设置图像本身的高度/宽度。 您可以使用background-size执行此操作

null

 * {
    background-color: black;
    margin: 0;
    padding: 0;
    }

    .mainBanner {  
    background-image: url(https://i.imgur.com/7a4DOBA.jpg);
    background-size:100% 100%;
    color: #ffffff;
    text-align: center;
    height: 700px;
    }
<html>
    <div class="container mainBanner">
    <h1>Welcome to The Travellers Website</h1>
    <h4>You're all in one solution for perfect travels. Make memories and take          step across 
    islands you've never seen before.</h4>
    </div>
    </html>

<!--Is the background image covered by the * selector when the bg color is applied? This imgae from the .mainBanner class doesnt load even the file is correct-->

匿名用户

background: url(/images/background.jpg) center no-repeat ;