Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

55
Vistas
Reveal absolute image over multiple span backgrounds

I'm working on a program that will periodically create new spans. Using only the style of said spans, how can I mask an image so that parts of the image are revealed as the background of these spans? Or is this not possible.

I've tried

mask-image: url("image-url.png")

but couldn't get it to work

7 months ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

I solved it with background-attachment: fixed;

It places the image relative to the viewport so no matter where the span is, its all relative to the same position.

7 months ago · Juan Pablo Isaza Denunciar

0

Not totally sure if this is what you mean. You can use:

background-position: center left;
background-size: cover;

which will act like a mask and you can just vary the background-position using left, right, center or a percentage.

See this snippet:

<html>

<head>
  <style>
    body {
      padding: 0;
      margin: 0;
    }

    .container {
      display: flex;
      height: 300px;
      flex-direction: column;
    }

    .stripe {
      grid-column: 1 / -1;
      height: 100%;
      display: grid;
      grid-gap: 0;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .stripe span {
      background-repeat: no-repeat;
      background-size: cover;
      margin: 6px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="stripe">
      <span
        style=" background-position: center right; background-image: url('https://live.staticflickr.com/8617/16110508435_486b0eeb81_b.jpg');"></span>
      <span
        style=" background-position: center; background-image: url('https://live.staticflickr.com/8617/16110508435_486b0eeb81_b.jpg');"></span>
      <span
        style=" background-position: center left; background-image: url('https://live.staticflickr.com/8617/16110508435_486b0eeb81_b.jpg');"></span>
    </div>
  </div>

</body>

</html>

7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.