[css-images] Add a way to composite multiple images

In #6807 the use case to composite and blend multiple images into one was mentioned in several comments.

As this seems orthogonal to the use case of manipulating a single image, I filed this issue, so it can be discussed separately.

The general idea is to establish different layers for images similar to how graphics programs have them. For each layer you can define an image (or maybe even multiple ones?) and additional information, e.g. a blending method or the position and size.

In the other issue @Crissov provided this syntax example:

@image --composite {
  @layer --stage {
    src: "backdrop.jpg";
  }
  @layer --scene {
    src: "parallax.png";
  }
  @layer --actor {
    src: "map.svg#sprite";
    position: 200px 300px;
  }
}

Here's a general syntax suggestion to get the ball rolling:

@image <custom-ident> {
  @image-layer <custom-ident>? {
    src: <image>;
    position: <'position'>;
    mix-blend-mode: <'mix-blend-mode'>
    width: <'width'>;
    height: <'height'>;
  }
  ...
}

@image in this example would be a general container for custom images. It might end up being the same one as for image manipulations or be a completely separate one, though in the suggested syntax it's used to generate the composited image.
This image can then be used in <image> values, either directly, i.e. --composite, or via a function like src(--composite) or image(--composite).

Sebastian

Start by reading this issue's discussion and the related issue #6807, including the proposed @image and @image-layer syntax. The work is not ready for a small implementation: done would require an agreed design for compositing, layers, positioning, blending, and how the result is used as an image value.