Estoy trabajando en un programa que periódicamente creará nuevos tramos. Usando solo el estilo de dichos tramos, ¿cómo puedo enmascarar una imagen para que partes de la imagen se revelen como el fondo de estos tramos? O esto no es posible.
He intentado
mask-image: url("image-url.png")pero no pude hacerlo funcionar
Lo resolví con background-attachment: fixed;
Coloca la imagen en relación con la ventana gráfica, por lo que no importa dónde esté el intervalo, todo es relativo a la misma posición.
No estoy totalmente seguro de si esto es lo que quieres decir. Puedes usar:
background-position: center left; background-size: cover;que actuará como una máscara y puede variar la posición de fondo usando izquierda, derecha, centro o un porcentaje.
Vea este fragmento:
<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>