使用背景圖像使圖像從div中出來

Question

我需要一些幫助，我需要對此圖像進行編碼：

這是我到目前為止的內容：

我嘗試添加空白頁邊距，頂部空白，並嘗試了相對位置和絕對位置的所有組合，我只需要一些有關如何做到這一點的想法。

這是我的代碼的結構：

<div class="background-oficina">
  <div class="container">
    <div class="col-xs-12 text-center">
      <img class="logo" src="logo.png" alt="Oficina de Redação">
    </div>
  </div>
</div>

這是我正在使用的兩個類的css：

.background-oficina {
  background: #fff url("bg-texture.png");
}

.logo {
  padding-top: 50px;
  margin: 0 auto;
}

Answer 1

嘗試此操作時，您可以將默認的height and width to parent div設置height and width to parent div包含該logo height and width to parent div ，然后使用position:absolute可以將其推出父級div，但不要添加overflow:hidden到parent div否則它會隱藏圖像或您嘗試將其父元素div以外的元素隱藏。

 .background-oficina { background: #fff url("https://via.placeholder.com/800x100/000") no-repeat; box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.2); background-size: 100% 100%; width: 100%; height: 100px; position: relative; /*Add this*/ } .logo { padding-top: 50px; margin: 0px auto; position: absolute; /*Add this*/ bottom: -20px; /*Add this*/ } 

 <div class="background-oficina padding margin-bottom"> <div class="container"> <div class="col-xs-12 text-center margin-bottom"> <img class="logo" src="https://via.placeholder.com/50/ff2" alt="Oficina de Redação"> </div> </div> </div> 

Answer 2

您可以使用另一個絕對定位的元素，您可以為其分配重復的背景圖案，並通過使用z-index: -1將該元素放置在原始元素的后面z-index: -1 ：

 html, body { margin: 0; } .background-oficina { position: relative; border: 1px solid #333; border-bottom: none; } .bg-container { position: absolute; z-index: -1; left: 0; top; width: 100%; height: 120px; /* or whatever height is desired */ background: url("http://placehold.it/20x15/cff"); } .text-center { text-align: center; } .logo { padding-top: 50px; margin: 0 auto; } 

 <div class="background-oficina"> <div class="bg-container"></div> <div class="container"> <div class="col-xs-12 text-center"> <img class="logo" src="http://placehold.it/200x150/fb7" alt="Oficina de Redação"> </div> </div> </div>