Re: background-opacity property proposal

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:30:54 UTC