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

[SebastianZ]

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

[Crissov]

I’d probably use SVG-inspired fill instead of src.

https://drafts.fxtf.org/fill-stroke/#fill-shorthand

[SebastianZ]

I’d probably use SVG-inspired fill instead of src.

I would rather make that the same as for the image manipulation rule. Otherwise it will be confusing why one uses src while the other one uses fill. And also because fill may lead authors to the assumption that stroke works as well.

Sebastian

[SebastianZ]

I’d probably use SVG-inspired fill instead of src.

I would rather make that the same as for the image manipulation rule. Otherwise it will be confusing why one uses src while the other one uses fill. And also because fill may lead authors to the assumption that stroke works as well.

Sebastian