How to blend a color with an image and make the image transparent?

Questions
5

Two things I can note here:

  • If the image is larger than the container it is placed in, it is resized automatically to fit. However, this is by default not reflected in the measured size, as measuring happens on an unbounded canvas. I would recommend using the layout function and passing the bounds in measure.

  • By using place, you can simplify this quite a bit, as you can set the alignment to the top left of the parent block (here the layout element), so that you don’t need to move the box manually.

Other than that, the idea is the exact same :)

#let overlay(img, color) = layout(bounds => {
  let size = measure(img, ..bounds)
  img
  place(top + left, block(..size, fill: color))
})
1 Like