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

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

From: David Hyatt <hyatt@apple.com>
Date: Wed, 03 Jun 2009 03:15:15 -0500
Cc: "Tab Atkins Jr." <jackalmage@gmail.com>, 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: <DEE111E8-6476-4D35-A6AC-99E4952D61E4@apple.com>
To: Simon Fraser <smfr@me.com>
On Jun 2, 2009, at 11:18 PM, Simon Fraser wrote:

> 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:
> <http://www.w3.org/TR/2009/WD-css3-transitions-20090320/>
> 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.

New functional primitives most likely that take URLs as arguments  
along with whatever parameters are needed to render the intermediate  
state.  In the case of a blend this would be source URL, destination  
URL and opacity for example.

blend(url(a), url(b), 0.5) for example.

Received on Wednesday, 3 June 2009 08:15:54 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:36 UTC