Creating an Semi-Transparent Background with Non-Transparent Text

A fun little css property that adds some dimension to a design is opacity. Opacity allows for the background to range from transparent to opaque depending upon the value. Rending certain areas semi-transparent allows for a cool layered look that creates some pow.

Some might be discouraged when you first noticed that using the opacity property creates any text within a div to also be semi-transparent. Fear thee not, there’s a solution to that!

Regular Old Opacity Property

Add the opacity property within the css for any div. Giving the value of 0 renders the div transparent. The value of 1 makes it non-transparent. Any number between 0-1 creates a semi-transparent effect. Here an example of what happens to text within a div that has an opacity of 0.5. As you can see the text isn’t exactly pure white. That’s because the text also has the opacity of 0.5.

CSS:

Now you might think, well what if you try setting the h1 opacity to 1 but alas that will not change a thing. So here is another alternative.

Using RGBa in the Background Color

Converting your hex color to an rgb color might be the way to go for this. Most modern browsers will ¬†accept an rgba property value for the background. RGBa allows for the use of colors and include alpha transparency support. It works the same way as opacity. 0 will render the background completely transparent, 1 will create an opaque background, and any number in between will be a semi-transparent color. Here’s how to declare it! Remove the opacity property and add this.

CSS:

What a difference:

And it doesn’t stop there!

What if I want to create a background shape with a semi-transparent background?

Semi-Transparent Borders

The same principal can be extending into border colors or any other property that takes a color value. This can create a lot of interesting applications. My favorite? Shapes!

Example:

You might be thinking, “Well thats swell but what about background images. You know what would be even cooler…semi-transparent images with non-transparent text.” And I totally agree.

Semi-Transparent Background Images with Non-Transparent Text

By using the opacity property and the :after selector we can accomplish this. And even better we can use the rgba background value to create a color filter over said background image. Cool right!? Here’s how we do it.

CSS:

 

And here it is:

After that its just a combination of these techniques to get you where you want to go.