【问题标题】:Background not appearing in div背景没有出现在div中
【发布时间】:2019-05-06 05:14:10
【问题描述】:

我正在尝试添加横幅图片并通过 CSS 调整其大小。 IMAGE 和 CSS 位于同一个文件夹中,彼此相邻。

HTML

<body>
<header>

    <div class="banner"></div>

CSS

div.banner {
background: url("games_header.jpg") no-repeat fixed center;
background-size: contain;
display: block;
margin: auto;
max-width: 100%;
height: 25%;    

}

【问题讨论】:

    标签: html image background-image


    【解决方案1】:

    您在该元素中没有内容,因此它的高度为 0 => 没有可见背景。只需添加一些内容,背景就会出现。

    如果父元素没有设置高度,height 设置无效。如果您希望横幅为窗口高度的 25%,请添加此规则:

    html, body {
      height: 100%;
    }
    

    【讨论】:

    • 这不起作用。我在 div 中添加了一些文本,文本出现了,但没有背景。
    • .banner { background-image: url("games_header.jpg");显示:块;高度:100%; }
    • 再次查看您的 HTML:如果 header 元素不包含除 banner DIV 之外的任何其他内容,则它还需要一些高度设置。
    【解决方案2】:

    我把它全部放在我创建的 html 文件中,这适用于我在同一目录中的图像。您不需要将其称为 div.banner,将类添加到 div 就足以通过您的名称来调用它。

        <head>
    
        <style>
            .banner{
                height: 100%;
                background-image: url('./butterbot.jpg');
                background-repeat: no-repeat;
            }
        </style>
    
    
    </head>
    <body>
        <header>
            <div class="banner"></div>
        </header>
    </body>
    

    【讨论】:

      【解决方案3】:

      background 是一个内联属性,如果您将背景样式设置为&lt;body&gt;(只是一个示例),它将与诸如htmlbody 属性的根元素一起使用。虽然不建议在htmlbody 上使用它,但它是一个具有 100% 宽度和高度的固定位置 div,如下所示

      .banner {
        background: url("https://picsum.photos/200") no-repeat fixed center;
        position: fixed;
        height: 100%;
        width: 100%;
      }
      &lt;div class="banner"&gt;&lt;/div&gt;

      【讨论】:

        猜你喜欢
        • 2012-07-12
        • 2014-04-07
        • 2013-11-25
        • 2020-10-25
        • 2014-03-25
        • 1970-01-01
        • 1970-01-01
        • 2012-03-01
        • 1970-01-01
        相关资源
        最近更新 更多