Question

这是我的代码

HTML：

    <body>
        <div id="wrapper"> <!--wrap for all the page-->
            <div id="header"> <!-- div for top part-->
                    <!--<p><img src="image/bannerwithologo.jpg"></p>-->
                <div id="txtlogo"> <!-- inside header for text-->
                    <p>HANA Squad</p>
                </div>

                <div id="menu"> <!-- inside header for menu-->
                    <p href=#>Vidéos</p>
                    <p href=#>Photos</p>
                    <p href=#>Agenda</p>
                </div>
            </div>

        <div id="contenu"> <!-- contents-->
                <div id="welcoming"> <!-- short presentation of the website-->
                </div>
        </div>

</body>

CSS：

.header {background-image: url('../image/banner.jpg');
    height:500px;
    width: 500px;

不关心我的div标题中的评论，我正在尝试别的东西并且没有删除它

这不是文件目录的问题，因为如果我将background-image放在html的css中，我的图片就会显示

我试过把不同大小的div标题但是......不工作

我知道这是一个愚蠢的问题..

Answer 1

<div id="header">您在代码中使用了ID，那么您必须在css中使用#来获取ID声明。

#header {background-image: url('../image/banner.jpg');
    height:500px;
    width: 500px;

对于您的代码，您必须设置一个类，例如

<div class="header">

Answer 2

问题在于，您的HTML中的header是一个ID（id="header"），但您的CSS定位为一个类（.header）。

您需要切换CSS以定位ID，或将HTML更改为<div class="header"></div>。对于它的价值，人们普遍认为，对于更易维护的CSS，你应该更喜欢类而不是ID。所以我会选择后两种选择。

Answer 3

这是你的答案

#header {background-image: url('https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');
    height:500px;
    width: 500px;
  }

 <body>
        <div id="wrapper"> <!--wrap for all the page-->
            <div id="header"> <!-- div for top part-->
                    <!--<p><img src="image/bannerwithologo.jpg"></p>-->
                <div id="txtlogo"> <!-- inside header for text-->
                    <p>HANA Squad</p>
                </div>

                <div id="menu"> <!-- inside header for menu-->
                    <p href=#>Vidéos</p>
                    <p href=#>Photos</p>
                    <p href=#>Agenda</p>
                </div>
            </div>

        <div id="contenu"> <!-- contents-->
                <div id="welcoming"> <!-- short presentation of the website-->
                </div>
        </div>

</body>

图像不会显示在<div>中

3 个答案: