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

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?

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.

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

   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%) }


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;


1. http://lea.verou.me/css3patterns/



-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Wednesday, 25 December 2013 13:46:20 UTC