Re: [css3-background] A property to control background opacity

On Dec 25, 2013, at 2:45 PM, Alan Gresley <alan@css-class.com> wrote:

> On 25/12/2013 6:56 AM, Simon Fraser wrote:
> 
>> Simon
>> 
>> On Dec 23, 2013, at 11:57 pm, Dirk Schulze <dschulze@adobe.com>
>> wrote:
>> 
>>> 
>>> On Dec 24, 2013, at 8:47 AM, Dirk Schulze <dschulze@adobe.com>
>>> wrote:
>>> 
>>>> 
>>>> On Dec 24, 2013, at 8:34 AM, Simon Fraser <smfr@me.com> wrote:
>>>> 
>>>>> On Dec 23, 2013, at 7:06 PM, Rik Cabanier <cabanier@gmail.com>
>>>>> wrote:
>>>>> 
>>>>>> On Mon, Dec 23, 2013 at 4:33 PM, David
>>>>>> <david.email@ymail.com> wrote: Hello,
>>>>>> 
>>>>>> it would be great if a CSS property would be added to control
>>>>>> the opacity of the background-image. The background-color and
>>>>>> its opacity is already controlable via rgba() or hsla(). The
>>>>>> opacity property itself allows just to control the opacity of
>>>>>> the whole element.
>>>>>> 
>>>>>> We had a short discussion on this at the last F2F during TPAC
>>>>>> [1]. It was unfortunately not minuted. :-(
>>>>>> 
>>>>>> During the meeting, people said that this feature has been
>>>>>> requested for a long time but for some reason, it never was
>>>>>> spec'ed out or implemented.
>>>>>> 
>>>>>> Normative text could look as follows: The
>>>>>> ‘background-opacity’ property
>>>>>> 
>>>>> An alternative to this would be to have an image function that
>>>>> gives an image alpha, e.g.:
>>>>> 
>>>>> background-image: alpha-image(foo.png, 50%);
>>>>> 
>>>>> This would seem preferable to a property that can only apply
>>>>> alpha to background images.
>>>> 
>>>> Just to give more alternatives: In WebKit the CSS Image function
>>>> -webkit-filter() is implemented with the opacity filter
>>>> function:
>>>> 
>>>> background-image: -webkit-filter(foo.png, opacity(0.5));
>>> 
>>> Just to give a bit more background: The filter() image function is
>>> specified in Filter Effects[1] and allows filtering other CSS
>>> Images:
>>> 
>>> filter( [ <image> | <string> ], <filter-function-list> )
>>> 
>>> opacity() is one of the filter functions beside others [2].
>>> 
>>> Greetings, Dirk
>>> 
>>> [1] http://dev.w3.org/fxtf/filters/#FilterCSSImageValue [2]
>>> http://dev.w3.org/fxtf/filters/#FilterProperty
>> 
>> Of course!
>> 
>> Given this, I see little utility in a per-background-image
>> background-opacity property.
> 
> What if one also needed to control background-repeat, background-attachment, background-position, background-clip, background-origin or background-size?

You can do all that the same way as you can do today. The filter() function doesn’t make any difference. It just filters your specified image and even allows animation of the filter operation.

> 
> Now with 'background-blend-mode', we now have another background property that accepts a comma separated list of values.
> 
> Offline testing also shows me that 'mix-blend-mode' with an background-image where one can control opacity is not achievable with 'background-image: filter()'. It requires 'background-image:element()' instead.

I do not understand your conclusion here. What does ‘mix-blend-mode’ (blending of elements) have to do with filter() or even background-blend-mode (which blends background layers)?

> 
>> The only utility for a new background-opacity property that I can see
>> is one that is not per-background-image, but rather applies opacity
>> to the grouped background images and background color,
> 
> Many of the effects I have used with transparency in background-image has always employed the use of a fully opaque background-color.
> 
> If you don't want element() for security reasons then it best to allow these filters to become a new background property since you can accept a comma separated list of values.

This thread is not about element() but having ‘background-opacity’ or not. I only said that it could be done with the filter() function. It doe neither mean it should be the only way or even is the best way. It just means it is possible with todays specifications.

> 
>  background-filter: blur(), opacity(), saturate(), hue-rotate();
> 
> Each one can be independently animated. If you just wanted to animate the opacity of just one background-image in a long background comma separated string, then the whole string must be used in such an animation instead something simple like this.
> 
> 0% { background-filter: opacity(100%) }
> 100% { background-filter: opacity(0%) }

If you already specify this chain, another filter function wouldn’t even be a problem.

> 
> 
> Below is one background string that I have used. I have had a colleague look at it and wondered what was happening. When you have nested parenthesis as in linear-gradients, it is so easy to make a mistake.
> 
> background: url(../images/image3.png) 0% 0% / 40% auto no-repeat, linear-gradient(0deg, rgba(255,255,255,0.5), rgba(0,0,255,0.3)), url(../images/image2.png) 0% 0% / 40% auto no-repeat, url(../images/image4.png) right 20px / 70% 250px no-repeat, rgba(50, 50, 255, 0.3);
> 	
> Below is one of the gradients in Lea's CSS3 Patterns Gallery [1] which also has background-position and background-size. If you wanted to animate opacity for a background-image that was the highest layer, then the whole background string below must appear in the animation.
> 
> background:
> radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0,
> radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px,
> radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0,
> radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px,
> radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0,
> radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px,
> radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0,
> radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px,
> linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0,
> linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0;
> background-color: #300;
> background-size: 100px 100px;

For each layer where you want to have opacity, you would need to write filter(…, opacity(0.5)), right.

Greetings,
Dirk

> 
> 
> 1. http://lea.verou.me/css3patterns/
> 
> 
> 
> -- 
> Alan Gresley
> http://css-3d.org/
> http://css-class.com/

Received on Wednesday, 25 December 2013 17:58:58 UTC