W3C home > Mailing lists > Public > www-style@w3.org > February 2015

Re: [css-backgrounds] Add opacity to <bg-layer> definition

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Wed, 11 Feb 2015 11:29:52 +1100
Message-ID: <CAAWBYDCE-U75mwZUi2fMh3WGqPyfpEN7ozMPAK4eibepDad65A@mail.gmail.com>
To: Axel Dahmen <brille1@hotmail.com>
Cc: www-style list <www-style@w3.org>
On Tue, Feb 10, 2015 at 5:51 PM, Axel Dahmen <brille1@hotmail.com> wrote:
>> Lots of things might be reasonable.  But they all grow the language,
>> so it has to pass a higher bar of "significantly useful", particularly
>> if there are good workarounds already.
>
> I don't believe there's a workaround already. Did you read my last message
> thoroughly? I was talking about positioning several layers of a background
> individually so programmers would be able to create watermark a/o logo
> images without additional ado. You currently can't do this with
> cross_fade().

If you're okay with them compositing separately, you can absolutely do
it today with cross-fade().  The current wk/blink implementation may
make it a little harder than it should be, per spec; you should be
able to say cross-fade(img.png 50%) to make an image 50% transparent.

>> Can you describe this example more fully?  I'm not sure I know what
>> you're asking about, exactly.
>
> While creating a sample for you I noticed that a very important part has not
> yet been addressed in CSS3: Watermarks.
>
> Watermarks are used to give status information about a document, e.g.
> "Sample", "Test Environment" or "Copy".
>
> Currently, some very important aspects required for watermarks are missing
> in CSS3:
>
> (1)  Watermarks must be in front of any content, yet must not receive mouse
> input.
> (2)  Currently, adding an absolutely positioned element for watermarks
> results in that element capturing mouse events.
> (3)  Watermarks may be positioned anywhere within an element, without
> influencing flow.
> (4)  Watermarks may be required to be rotated reach, e.g. from the bottom
> left to the upper right (similar to linear gradients).
> (5)  Watermarks may be semi-transparent.

Use an abspos with 'opacity' and "pointer-events: none;", with
'transform' if you want to rotate.

No use of backgrounds would satisfy your first criteria.

~TJ
Received on Wednesday, 11 February 2015 00:30:39 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:52:01 UTC