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

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


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


Here are a number of screenshots demonstrating above points:
http://imgur.com/a/5EpnQ


Hence, I suggest the <bg-layer> definition to be amended by the following 
properties:

* Opacity
* Angle (0 - 360°, BottomLeftToTopRight, TopLeftToBottomRight, 
TopRightToBottomLeft, BottomRightToTopLeft)


My samples would, thus, result in the following suggested CSS:

[1]  background: .5 url("Watermark.png") center / 70% BottomLeftToTopRight 
no-repeat fixed , url("Woods.png"), black;
[2]  background: .5 url("Watermark.png") center / 70% BottomLeftToTopRight 
no-repeat fixed , url("Woods.png"), black;
[3]  background: .5 url("Watermark.png") 90% no-repeat fixed , 
url("Woods.png"), black;

Received on Tuesday, 10 February 2015 06:54:14 UTC