Re: background-opacity property proposal

cross-fade() looks too verbose as well as filter(). We need a simple means to achieve real-world goals.

background-opacity is that simple. The paradigm can be extrapolated to a few other visual properties: border-opacity, outline-opacity, text-opacity.

Moreover, "-opacity" suffix can be considered as universal mechanism to specify opacity for any property what opacity itself is applicable to.


06.09.2011, 02:29, "Tab Atkins Jr." <jackalmage@gmail.com>:
> On Mon, Sep 5, 2011 at 2:14 PM, Marat Tanalin <mtanalin@yandex.ru> wrote:
>
>> šHello. It would be nice to have background-opacity property.
>>
>> šIt's like rgba() but far more useful: background-opacity property could control opacity of _entire_ background including background color _and_ image together.
>>
>> šFor example, currently we are limited to apply CSS transitions to only background color opacity (via rgba()) which is useless in most of cases when an element have not only background-color, but also background-image assigned. background-opacity would allow to control and animate opacity of entire background:
>>
>> šexample {background: #000 url(example.jpg); background-opacity: .5; }
>
> Being able to set the opacity of an image is useful for more than just
> 'background-image' - it could be useful for 'list-style-image' or
> 'border-image' as well. šAs such, a more general mechanism for making
> an image partially transparent would be better.
>
> This can sorta be achieved by the cross-fade() function (previously in
> Image Values 3, now in level 4) with something like:
>
> background-image: cross-fade(url(foo.jpg), image(transparent), 50%)
>
> ...but that's verbose and it's not really obvious what's happening
> when you look at it.
>
> It would probably be useful to have a function that directly adjusts
> the opacity of an image, perhaps as a filter function
> <https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/publish/Filters.html#FilterFunction>,
> like:
>
> background-image: filter(url(foo.jpg), opacity(50%))
>
> That's shorter and easy to read, and you can then proceed to apply
> other types of filter effects to the image easily.
>
> (It's also been suggested that the 'filter' property, defined in the
> spec linked above, be able to specify parts of the element that the
> filter applies to, so you could specifically apply a filter to the
> background as a whole, or the border, or the text, etc. šThat would
> also allow you to directly adjust the opacity of an element's
> background, if an opacity() filter function were created.)
>
> ~TJ

Received on Monday, 5 September 2011 22:52:06 UTC