Something I always find myself doing is needing a hero image that has an opacity on it and then put some text inside of the div holding it all together. This is also something that is common when I need to have visible text but do not want the image behind the said div to be obstructed.
When is this used?
– Hero images or Call To Action areas of a site
– A “keep scrolling” area that sits over some graphics or exisitng areas of the design
– Buttons with a transparent type effect
See the Pen text with opacity by taterdev (@wisecodeworks) on CodePen.
What we are seeing here above is the classic we have an image and need some text to overlay it without disturbing the actual image. This can be simple text, a button, or a feature to the object behind it.
Where Is The AwesomeNess?
In this case we breakdown the RGB.
RGB(0,0,255,0.6)
The frist three places define the color, but the 0.6 is the opacity that I am applying to get the desired effect. So really if you look up the rgb color code and then play with the 4th spot you can adjust as needed.
Why Not Use Opacity?
I used to always consider using opacity to accomplish this but then it would affect everything inside the image and really the colors could not be maintained that well. Instead with the power of RGB you can indeed control that color and only on the background while leaving everything else alone. Problems I would have to accomplish this as well as an attempt to take the image in Photoshop and then put the desired opacity on the image/object in question and apply the effect.
CSS Superpowers
I think it is important to remeber we all learn things daily and this CSS thing is at times magic. Jokes aside this really helped me develop better websites by learning this, and for that reason I thought others could find is useful as well.