[csswg-drafts] [css-images] Add a way to composite multiple images (#7666)

SebastianZ has just created a new issue for https://github.com/w3c/csswg-drafts:

== [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:

```css
@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

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7666 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 31 August 2022 12:39:28 UTC