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

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

From: Giovanni Campagna <scampa.giovanni@gmail.com>
Date: Tue, 2 Jun 2009 18:59:11 +0200
Message-ID: <65307430906020959u14fb2d15uda2557db7fefa1da@mail.gmail.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: Brad Kemper <brad.kemper@gmail.com>, Boris Zbarsky <bzbarsky@mit.edu>, Mark <markg85@gmail.com>, www-style@w3.org
2009/6/2 Tab Atkins Jr. <jackalmage@gmail.com>:
> On Tue, Jun 2, 2009 at 11:38 AM, Brad Kemper <brad.kemper@gmail.com> wrote:
>> On Jun 2, 2009, at 9:21 AM, Boris Zbarsky wrote:
>>> Mark wrote:
>>>> Now with the css 3 backgrounds module multiple backgrounds are going
>>>> to be supported. Webkit has support for it and Gecko is in the
>>>> progress of making it all work. Now with that module (once adapted by
>>>> the biggest rendering engines) you can give one element both his
>>>> normal image and his hover image which is exactly the way it should be
>>>> if you ask me. Now i see one issue comming there. If you want to fade
>>>> from the normal image to the hover image you currently (if i read the
>>>> spec right) can't do that because there is no way of letting either
>>>> one of those images disappear, no way to set the opacity per image.
>>> Seems like this could be dealt with by just having separate style rules
>>> setting the two images and defining CSS transitions on background image to
>>> do fade in/out, maybe....

How would you do that? Do you mean to fade out completely the previous
image, then fade in the new?
I don't think this is what the original poster intended.

>>> -Boris
>> Yes, I think that fade transitions would be good for a few other properties
>> too (those that don't change layout), such as visibility, border-style
>> (except for 'none'), content, list-style-image, border-image, etc.
> Basically transitioning any image can be done with a fade like that.
> Ooh, the thought of transitioning border-style is interesting.
> ~TJ

If any image can be faded, it seems that "fading level" (opacity) is a
property of the image and therefore should be specified along with the
I mean something like faded-img(<uri>,<number>), to be used in
background-image, border-image, list-style-image, etc.
It is slightly more verbose when you deal with transitions (since you
repeat every time the <uri>), but avoids adding new properties (and
potentially new values for the shorthand)

More powerful would be to apply any SVG filter to the image, not just
opacity, for example to animate from black and white to colour, but I
don't know if it is needed.

Received on Tuesday, 2 June 2009 16:59:44 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:27 UTC