Text damunt d’una imatge sense background


HTML:

<div class="contenidor">
  <img src="url-imatge.jpg" />
  <div class="text-damunt">Text</div>
  <div class="centrat">Centrat</div>
</div>

CSS

<div class="contenidor">
  <img src="url-imatge.jpg" />
  <div class="text-damunt">Text</div>
  <div class="centrat">Centrat</div>
</div>

.contenidor{
    position: relative;
    display: inline-block;
    text-align: center;
}

.text-damunt{
    position: absolute;
    top: 10px;
    left: 10px;
}
.centrat{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Deixa un comentari

L’adreça electrònica no es publicarà. Els camps necessaris estan marcats amb *

20 − eight =

Información básica sobre protección de datos Ver más

  • Responsable: Jordi Juan Pérez.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a NICALIA que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Ver Política de cookies
Privacidad