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

On Tue, Jun 2, 2009 at 7:25 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
> On Tue, Jun 2, 2009 at 12:12 PM, Mark <markg85@gmail.com> wrote:
>> On Tue, Jun 2, 2009 at 6:59 PM, Giovanni Campagna
>> <scampa.giovanni@gmail.com> 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.
>>>
>> I don't exactly know what the css transitions draft (?) is capable of
>> but it doen't sound like the thing i meant.
>> Fading out one image right now is possible! only then you need to fade
>> out the entire div which required you to make 1 container div and a x
>> number of state divs (one for hover one for normal etcetera.) What i
>> intended was just the ability to set the opacity of one of the
>> background images (or all).. and the added bunos of that ability is
>> that a fade transition becomes possible without putting in multiple
>> elements to cross fade.
>
> The CSS Transitions draft is a module presenting the ability to
> smoothly transition between different values rather than just abruptly
> changing them.  For example, the following CSS will produce an abrupt
> transition:
>
>    p {
>      border: 2px solid red;
>    }
>    p:hover {
>      border-color: blue;
>    }
>
> However, we can add a rule like this:
>
>    p {
>      transition-property: border-color;
>      transition-duration: 1s;
>    }

O wow that's neat!
>
> And now, whenever you hover over the <p>, the border will smoothly
> change from red to blue over a second, and smoothly change back from
> blue to red when you move your mouse away.
>
> 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.
>
> Not only does this make it extremely easy for you, it also maintains
> backwards compatibility with old browsers.  They'll just ignore the
> transition declarations and make an abrupt transition, which isn't
> quite as pretty but still gets you basically what you want.  Your
> original suggestion doesn't do this - browsers without the suggested
> ability will just display both backgrounds at the same time all the
> time.  But don't worry about it; like I said in an earlier email,
> usually the first thing to pop to mind is just standardizing what
> you're currently doing, even if what you're currently doing is a dirty
> hack.  ^_^
>
> ~TJ
>

And if i'm right (i sure hope so) this is already possible with the
webkit nightly builds?
or is that not accepting things like background-image on images yet?
The transition docs say: background-image -- only gradients and the
property background (without the -image) isn't listed. Now if
background-image is only acceptiong gradients (strange.. i don't get
that) then it must be tweaked in those docs to support images as well.

And just wondering.. why isn't the background property in there?
(link: http://www.w3.org/TR/css3-transitions/)

Thanx,
Mark

Received on Tuesday, 2 June 2009 18:45:28 UTC