I am repeating myself from yesterday. Opacity and layering are fictions
of image rendering. It makes no difference what the image order is.
Still in doubt: consider that a fully opaque SVG will dutifully show the grid
underneath if requested to do so. Voilà.
A bit of reading in Wikipedia informs one that the alpha channel idea dates from the
1970s. Storing information on a single pixel could take the form of a
reading in each of red, green and blue along with an opacity factor in the alpha.
Debate then ensued about whether it was better to store opacity in the channels or in the
alpha. The first option is truer to the image in all conditions (including when one of the
color channels is at 0). The second is more economical of computing resources.
The SVG feColorMatrix will render an image with the opacity behavior of the SVG
figure on which it is applied: That image itself will take on a lighter tint if the matrix
has a less than one opacity setting. the example shows reference at full opacity(1).
The second is the figures at 1 but the matrix settings at 50% opacity. the colors are washed
out, but the image is fully opaque. The last inputs figures that are 50% transparent with
the full force of opacity 1 asked for in the matrix. The figures are 50% transparent.
http://plnkr.co/edit/S80W6lYV2Pmugo2sVydn?p=info
* * *
The Mozilla presentation of the feColorMatrix is useful in that each
of the circle effectively represents a color channel. The order of layering
shows up backward on the matrix: last layer entered, first line of the
matrix... One must be careful with names, however:
what html recognizes as green is not the green of RGB(0, 255, 0). The
word for that color is lime.
* * *
yellow is RGB(255, 255, 0);
magenta is RGB(255, 0, 255);
cyan is RGB(0, 255, 255);
while a bit of math tells you that 16^2=256 (255 counted from 0).
http://plnkr.co/edit/SqemobEr3npqZAwaQ49C?p=preview
* * *
http://plnkr.co/edit/6Aed8K28qYC2qwWtVLLr
* * *
The fourth row and column both have to do with the play of
light on images, and I've picked a picture of Lake Como (Italy)
to get an idea. The first is the original image, the second adds an intensity
boost to what is seen in the blue column. At +2, the whole picture gets lightened.
The third adds an Alpha channel to blue; the last repeats the same
operation with a negative value, so the everything but blue is affected.
http://plnkr.co/edit/2Z4szzNg1UwzwVXFlZpQ
http://alistapart.com/article/finessing-fecolormatrix
No comments:
Post a Comment