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