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

On Jun 2, 2009, at 9:59 AM, Giovanni Campagna wrote:

> 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.

Fading out the top image would reveal the one underneath it in a multi- 
background element.

Alternately, just have a single-background elements, and cross fade  
between the two background images of the two states.


>>>> -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
> image.
> 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)

I'd rather the transition module just said that for non-layout- 
affecting elements that do not have intermediate states, that cross- 
fading between them should be used for the intermediate states.

I suppose in theory, there COULD be intermediate states for border- 
style other than a simple dissolve.

> 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.

Maybe for CSS4?

Received on Tuesday, 2 June 2009 17:06:07 UTC