Opacity And Alpha Channels

  • At this point, I'm try to tidy up a hideous website, and see what designs work, and what don't. I'll try to apply all lessons learned to reformat this at a later date :)

    • Opacity and Transparency

  • Transparency is more commonly controlled by the rgb color setter rather than the hex setter. rgb becomes rgba, where the a means alpha, and can be set at a value between 0 and 1 to govern an element's transparency
  • To demonstrate this, I have created a magenta section below, with a 50%*50% div inside it
  • To avoid confusion, I avoided using the term opaque for now. However, remember that rgba(x,y,z,0.0) = full transparency, while rgba(x,y,z,1.0) = fully opaque!
    • This little div is set to a height/width 50% of the size of the original square. However, the background-color has been altered to white using rgba! That's rgba(255,255,255,0.7). If we use lgba(255,255,255,1.0), then our transparency will be 0! lgba(255,255,255,0.0) would give FULL transparency. As it is, this white square is 30% transparent
  • Opacity is defined as the degree to which content behind an element is hidden, and is the opposite of transparency. Opacity applies to an element as a whole (including ALL contents), even though the value is not inherited by child elements. So, the element and its children all have the same opacity relative to the element's background, even if they have different opacities relative to one another. If you don't want to apply opacity to child elements, use background instead
  • In the example below, the property opacity is changed! Thus, as well. The background-color is set to YELLOW, with an opacity of 0.5. The color doesn't look very yellow, right? It's simply yellow that is 50% opaque, allowing the magenta below to seep through
  • To change the opacity of a background only, use the background property with a color value that allows for an alpha channel.
    • This 0.5 opacity applies to this ENTIRE ELEMENT (this text is originally a custom eggplant color, but is now looking quite magenta-y, right? That's because the 0.5 opacity in this div also applies to the text! In the example above, the text color isn't impacted at!

    Next up, try this on Position