Re: [css-backgrounds] Add opacity to <bg-layer> definition

On Sun, Feb 1, 2015 at 6:44 PM, Axel Dahmen <brille1@hotmail.com> wrote:
> Can't use cross_fade() for this purpose, because you cannot apply background
> attributes, like repeat, to cross_fade() images each.

That's correct, but a non-sequitur.  I was suggesting cross-fade()
because it lets you create faded-out images.  (I think the
Webkit/Blink impl doesn't match the current spec, so it's a little
harder than it should be to do this; I think you have to manually
provide a transparent image, such as with a super simple data: url).
You can then use that faded-out image in background-image as normal.

I suspect you thought I meant using cross-fade() to fade between the
two layer images?  If they're the same size/position/etc, you can do
that and it's nice and easy (and you don't even *need* to use
cross-fade() manually; the impls that support it will automatically
use it when you just do an animation/transition between two images).

If they're not the same, then no, that won't work; you need to fade
each image separately with individual cross-fade()s.

> Moreover, I'm missing a transition definition for cross_fade(). From the
> spec I understand that cross_fade() is only be used *within* a transaction.

No.  You can use cross-fade() wherever you want; it's just a type of
<image>, and is usable anywhere that <image>s are.  What part of the
spec suggests that it can only be used within a transition?

> Thus, I'm missing a definition for transitioning the following two rule
> sets:
>
>    div
>    {
>      background: cross-fade(30% url('a.png'), url('b.png')) center / contain
> no-repeat fixed;
>      transition: background 2s linear;
>    }
>
>    div:hover
>    {
>      background: cross-fade(60% url('c.png'), url('b.png')) center / contain
> no-repeat fixed;
>
>    }

That's defined in the spec.
http://dev.w3.org/csswg/css-images-3/#interpolating-image-combinations

In particular, since these two cross-fade()s do not use the same image
arguments, they're interpolated per standard for <image> - they're
wrapped into another cross-fade() which does the transition.

~TJ

Received on Wednesday, 4 February 2015 04:32:38 UTC