使用背景图像使图像从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>