[webkit-dev] Adding blending mode to background images

Fri Feb 1 12:44:17 PST 2013

Sure!

For instance:

<!DOCTYPE HTML>
<html>
<head>
<style>
.example {
width: 500px;
height: 500px;
background-image: url(a.png), url(b.png);
-webkit-background-blend-mode: screen, screen;
}
</style>
</head>
<body style="background-color: green;">
  <div class="example"></div>
</body>
</html>

The <div> in this document contains 2 background images. The
'-webkit-background-blend-mode' property assigns a blending mode to each of
them.
It works very similar to '-webkit-background-composite' [1]

The images blend with each other and their existing backdrop as stated by
the CSS drawing model [2].
This feature will give designers the ability to blend layers of images
together much like they do in graphics applications [3]

Rik

1: https://www.webkit.org/blog/181/css-masks/
2: http://www.w3.org/TR/CSS21/zindex.html
3: see *http://www.youtube.com/watch?v=diJzT-sHizg* for links to tutorials.

On Fri, Feb 1, 2013 at 12:09 PM, Dirk Schulze <krit at webkit.org> wrote:

> Hi Rik,
>
> Can you just add an example for the better understanding please?
>
> Greetings,
> Dirk
>
> On Feb 2, 2013, at 6:43 AM, Rik Cabanier <cabanier at gmail.com> wrote:
>
> > Hi,
> >
> > I'd like to add support for blending of background images.
> > The spec for this feature can be found here:
> https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#background-blend-mode
> >
> > The implementation will be tracked by a meta bug:
> https://bugs.webkit.org/show_bug.cgi?id=108546
> >
> > Please let me know of any concerns.
> > _______________________________________________
> > webkit-dev mailing list
> > webkit-dev at lists.webkit.org
> > https://lists.webkit.org/mailman/listinfo/webkit-dev
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-dev/attachments/20130201/7370ddbe/attachment.html>