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

On 24/12/2013 6:47 PM, Dirk Schulze 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));
>
> Greetings,
> Dirk

You would want to apply it to different background layers. It can be 
done already by applying opacity to a referenced element via 'element()' 
in background-image but that is a hack.

I support 'background-opacity' or something like 'background-filter' 
since you can animate a numerical value. I believe it's not future proof 
to use opacity buried in a value within parenthesis that is already 
nested in a value within parenthesis like 'filter(foo.png, 
opacity(0.5))'. Something like the below is also simpler for an author 
to follow.


   background-image: url(), linear-gradient();
   background-filter: blur(20px), opacity(0.5);


Alan



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

Received on Tuesday, 24 December 2013 15:23:13 UTC