使用背景图像制作图像

Question

我需要一些帮助，我需要对此图像进行编码：

这是我到目前为止所做的：

我尝试添加一个margin-top，padding-top，尝试了相对和绝对位置的所有组合，我只需要一些如何做的想法。

这就是我的代码的结构：

<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组成的默认logo，然后使用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为其指定重复的背景图案以及放在原始元素后面：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;