如何使徽标出现在背景图片上?

时间:2019-05-12 01:02:56

标签: html css

我正在尝试将徽标放在背景图片上方。

我注意到,设置浮点数会将其移到图像上,但是它不在我想要的位置。我将徽标设置在具有引导行类的单独的div上(这可能是为什么它正在干预。我该怎么办?

<section>
  <div class="row">
    <img src="images/pdlogo.png" alt="logo" height="130px" class="logo">
  </div>
  <div id="formulario" class="col-sm-6 form animated bounceInUp">
    <h1> Ingresa Aqui!</h1>
    <form>
      <div class="formcontainer">
        <label for="nombre">Nombre </label>
        <input type="text" required id="nombre" name="nombre" placeholder="Hugo">
        <label for="apellido">Apellido</label>
        <input type="text" required id="apellido" name="apellido" placeholder="Sanchez">
        <label for="email">Correo Electronico</label>
        <input type="email" required id="email" name="email" placeholder="hugosanchez@gmail.com">
        <label for="telefono">Numero de Telefono</label>
        <input type="tel" required id="telefono" name="telefono" placeholder="78126177">
        <label for="codigo">Codigo de Compra</label>
        <input type="text" required id="codigo" name="codigo" placeholder="PD78907">
        <input type="submit" id="submit" value="Enviar">
      </div>
    </form>
  </div>
  <div class="col-sm-6 info">
    <h1> 2 Pasajes Gratis</h1>
    <h2>en 2 pasos simples...</h2>
    <h3>(<span>1</span>) Realiza compras en PatioDesign y guarda tus recibos (contienen el codigo especial) </h3>
    <h3>(2) Ingresa a la seccion "Registros" y llena el formulario</h3>
    <h5>La rifa cierra el Marzo 30, 2019 a las 7:00PM</h5>
    <h5>Resultados se enviaran el día siguiente por mail y se anunciaron en esta misma pagina</h5>
  </div>
</section>

1 个答案:

答案 0 :(得分:0)

欢迎来到stackoverflow索非亚!

您可以使用position: relative; z-index: 2。将对象的位置设置为相对时,它将成为有序图层列表。通过传递z-index:2,即告诉您在有序图层中,我希望它位于项目1和项目3之间。请确保背景的z-index小于徽标,以使其正常工作。