如何添加2背景圖像與div

好日子，我試圖創建一個簡單的HTML頁面。現在，我正在嘗試添加bg-image/color。所以我有這個簡單的HTML標籤如何添加2背景圖像與div

<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; 
}

但它並不敏感，因爲當頁面高度的變化，背景被打破

來源

2017-09-27 YVS1102

@HenryVarro是啊，這就是我想要的 – YVS1102

您可以使用下面的代碼用於在div中添加2個圖像：

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

您可以通過以下鏈接查看[R更好的理解：

來源

2017-09-27 03:34:35

您可以使用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

來源

2017-09-27 03:37:21 shree33

如何添加2背景圖像與div

回答

相關問題