- From: Axel Dahmen <brille1@hotmail.com>
- Date: Tue, 10 Feb 2015 08:07:28 +0100
- To: www-style@w3.org
Forgot one property in my remarks: Front
Similar to the box-shadow "inset" attribute, <bg-layer> should get a FRONT
attribute, so watermarks will get displayed in the front of any of the box's
content, no matter which z-index is getting applied to child nodes.
So here's my amended suggestion:
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 value
* Angle value (0 - 360°, BottomLeftToTopRight, TopLeftToBottomRight,
TopRightToBottomLeft, BottomRightToTopLeft)
* Front switch
My samples would, thus, result in the following suggested CSS:
[1] background: FRONT .5 url("Watermark.png") center / 70%
BottomLeftToTopRight no-repeat fixed ,
url("Woods.png"),
black;
[2] background: FRONT .5 url("Watermark.png") center / 70%
BottomLeftToTopRight no-repeat fixed ,
url("Woods.png"),
black;
[3] background: FRONT .5 url("Watermark.png") 90% no-repeat fixed ,
url("Woods.png"), black;
And the <bg-layer> specification would read similar to this:
<bg-layer> = front? <opacity> || <bg-image> || <position> [ / <bg-size> ]?
|| <angle> || <repeat-style> || <attachment> || <box> ||
<box>
Cheers,
Axel
Received on Tuesday, 10 February 2015 07:10:01 UTC