W3C home > Mailing lists > Public > www-style@w3.org > June 2009

Re: Proposal: background-image-opacity or background-opacity

From: Simon Fraser <smfr@me.com>
Date: Tue, 02 Jun 2009 21:18:09 -0700
Cc: Mark <markg85@gmail.com>, Giovanni Campagna <scampa.giovanni@gmail.com>, Brad Kemper <brad.kemper@gmail.com>, Boris Zbarsky <bzbarsky@mit.edu>, www-style@w3.org
Message-id: <68C68EE9-1043-4B86-8F22-7185C14B58E9@me.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
On Jun 2, 2009, at 10:25 AM, Tab Atkins Jr. wrote:

> In your case, you have an abrupt transition like:
>    div {
>      background: url( foo.jpg );
>    }
>    div:hover {
>      background: url( bar.jpg );
>    }
> And you want to make it into a smooth transition by crossfading from
> one image to the other.  This is exactly what the Transitions module
> is designed for, and crossfading between images does seem to be the
> best idea in general for this sort of thing.  So we just need to
> extend the Transitions module so that it specifies how to transition
> the background-image property.

Transitions applied to backgrounds like this are a little different  
from the
transitions that the draft talks about:


In the draft, and the current WebKit implementation, transitions are
implemented by changing the value of an existing CSS property on
a timer, and re-rendering the content for each frame. While the
transition is running, getComputedStyle() will return the currently
displayed value of the property.

If we decide to do cross-fading of background images without any
additional new properties, we'll need to extend the spec to say what
getComputedStyle() returns for background-image while the transition
is running. The answer is not obvious to me.

In this sense, the earlier suggestion of adding a background-opacity
property makes sense; we then get back to the state where the engine
can animate this new property, and getComputedStyle returns something  

To get a crossfade effect, the author would then have to do something
like this:

#foo {
   transition: background-image 2s;
  background-image: url(apple.jpg), url(orange.jpg);
  background-opacity: 1, 0;

#foo.after {
  background-opacity: 0, 1;

This is no longer automatic cross-fading, but it seems to fit better  
with the
current notion of transitions. There's less magic here.

Received on Wednesday, 3 June 2009 04:18:47 UTC

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:13:37 UTC