The task of creating an overlay to an image in HTML can be
a little tricky. One has to define it conceptually. The overlay
function is called the z-index. At z-index 2, one is one layer above
the image.
From mathematics, z is the third axis. However, here, the work remains
in two dimensions. It is the coder who calls upon another layer on the
z dimension.
A simple situation in the code below. The coconut tree is the base
image; the overlay is mid-gray with HELLO! written in white.
The film shows the difference between having the overlay in a
fixed position ie relative to the screen, and absolute ie relative to the image.
I am working here with Adobe Brackets as an editor. I like VSCode
because it gives an instant HTML set-up to a saved HTML file. But
Bracket's view-as-you-work is awfully handy!!
No comments:
Post a Comment