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

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

From: Axel Dahmen <brille1@hotmail.com>
Date: Tue, 10 Feb 2015 08:07:28 +0100
To: www-style@w3.org
Message-ID: <mbcar7$a20$1@ger.gmane.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

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