A class
assignment required using a company logo as a background image behind text. The
company logo was required to be 70% transparent. The opacity property renders
the logo and the text transparent because it is an inherited property. How do
you keep the text visible? This requirement had me stumped as I
tried different approaches.
One reason
this concept was so difficult for me was because I remember making images
transparent in Photoshop with the touch of a button. Because of this, it was
difficult for me to understand what has to happen for a logo to be partially
transparent without affecting the text and without using Photoshop or another image editing
application.
This is the
scheme. The logo is applied to a div as a background image. The text is placed
in a nested div inside the logo div. A background color (matching the body
color) is applied to the text div. It covers up the logo, right? The
transparency of the background color is adjusted to let the logo show through
as desired. You do this with the rgba color property:
background-color:
rgba(94, 153, 150, .75) where the .75 is the opacity (alpha value) of the background
color. To get the logo to be very faint
at 30% opacity, we cover it up with a background color on the text div with an alpha value of .7.
It is a background color and does not affect the text.
GEM #6 The
key here is to understand that you’re working with a layer (div) on top of the
logo div to create the transparency.
A helpful
video for this concept is by hdvidsonly.
No comments:
Post a Comment
Please leave your professional comments.