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

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

Sure, that would be alright for semi-transparent images.



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

That would not only involve adding an additional block element, but also 
would involve a number of rather complicated CSS from all different specs of 
CSS. Morever, there is no rotate() angle definition in the CSS spec that's 
defining a rotation angle that's dynamically rotating an image to reach from 
one corner of a box to the opposing corner of that same box.

You wrote:
>> Lots of things might be reasonable.  But they all grow the language.

Absolutely agree. I'm, however, suggesting something simple. Something 
reasonable that's going to simplify the language.

That said, CSS has become a Medusa of different specifications, partially 
overlapping each other. I believe it's time to consolidate all those 
different ideas into one straight specification.


> No use of backgrounds would satisfy your first criteria.

Hmm, you don't seem to have received my previous message. I have suggested a 
simple addendum to the <bg-layer> definition that in fact WOULD satisfy my 
first criteria, along with all the others, without much ado:


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

* Opacity value (cross-fade() would do here)
* Angle value (0 - 360°, BottomLeftToTopRight, TopLeftToBottomRight,
                       TopRightToBottomLeft, BottomRightToTopLeft)
* Front switch


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

[1]  background: FRONT cross-fade(50% "Watermark.png") center / 70%
                           BottomLeftToTopRight no-repeat fixed ,
                           url("Woods.png"), black;

[2]  background: FRONT cross-fade(50% "Watermark.png") center / 70%
                           BottomLeftToTopRight no-repeat fixed ,
                           url("Woods.png"), black;

[3]  background: FRONT cross-fade(50% "Watermark.png") 90%
                           no-repeat fixed, url("Woods.png"), black;


And the <bg-layer> specification would read similar to this:

<bg-layer> = front? <bg-image> || <position> [ / <bg-size> ]?
                 || <angle> || <repeat-style> || <attachment>
                 || <box> || <box>


Regards,
Axel

Received on Wednesday, 11 February 2015 12:55:43 UTC