Question

我正在尝试创建一个简单的HTML页面。现在，我尝试添加bg-image / color。所以我有这个简单的html标签：

<html>

  <style type="text/css">
    .header {
        height: 100px;
    }   

    .kontent1 {
        height: 50px;
        margin-top: 10px;
    }

    .kontent2 {
        height: 50px;
        margin-top: 10px;
    }
  </style>

  <div class="bgheader"></div>
  <div class="header">HEADER</div>
  <div class="kontent1"> KONTENT </div>

  <div class="bgfooter"></div>
  <div class="kontent2"> KONTENT</div>
  <div class="footer">FOOTER</div>

</html>

所以，我想要实现的是这样的：

如何实现这一目标？

更新

我试过这个：

body{

    background:
        url('<?=base_url();?>/assets/header_bg.png')no-repeat 100px -30px,
        url('<?=base_url();?>/assets/footer_bg.png')no-repeat 0px 96%;    
        background-size: contain;
        max-height:80%;    
        padding-top: 20px;
        margin-bottom:10px;
}

但它没有响应，因为当页面高度发生变化时，背景会被破坏。

Answer 1

您可以使用以下代码在div中添加2张图片：

您可以通过以下链接获得更好的理解：

Answer 2

您可以使用background-color获取背景颜色，并使用background-image作为这些容器的背景图像。由于您有两个不同的容器，因此更好的方法是单独设置背景，而不是使用body或父div上的背景。

您可以尝试这样的事情，

.header-container, .footer-container {
   width: 200px;
   height: 200px;
   border: 2px solid black;
   text-align: center;
   text-transform: uppercase;
}

.header, .content {
  min-height: 100px;
}

.header-container {
  background-color: #DD3388;
}

.footer-container {
  background-color: #33DD44;
}

<html>
    <head>
    </head>
    <body>
        <div class="header-container">
            <div class="header"> Header </div>
            <div class="content"> Content </div>
        </div>
        <div class="footer-container">
            <div class="content"> Content </div>
            <div class="footer"> Footer </div>
        </div>
    </body>
</html>

如何使用div添加2个背景图像

2 个答案: