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

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>

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

怎么能实现这一目标？

UPDATE

我试过这个：

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个图像：

background-image: url(image1.png), url(image2.png);
background-position: center bottom, left top;
background-repeat: no-repeat;

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

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个背景图像

问题描述投票：0回答：2

2个回答

最新问题

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

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2