css tip text box transparency

CSS Opacity Property – Text Box

In another article, we discussed how we can use the CSS Opacity Property to change the transparency of an image.  But let’s say we want to keep the image at its normal opacity (100%) but we want to add text over the image.  Depending on the background of the image and the color of the text, it may make it hard to read the text.

If we use a background color on the text box, that would help in able to read the text but maybe we don’t want to block out the image in the background with a text box.

A nice effect is to use a semi-transparent box over the image.  It allows your visitor to see the image in the background yet at the same time make it easier to read the text.

Here’s the finished product using two different CSS Opacity propeties:

css opacity property

Here’s the source code for the above:

<html>
<head>
<style>
#poolTable {
width:225px;
height:225px;
background:url(http://blog.jamesgirardi.com/wp-content/uploads/2014/11/transparency1.jpg) no-repeat;
border: 1px solid black;
}

#box80 {
width: 205px;
background-color:#000;
margin-top:10px;
margin-left:10px;
margin-right:10px;
opacity:.8;
filter: alpha(opacity=80); /* For IE8 and earlier versions */
}

#box60 {
width: 205px;
background-color:#000;
margin-top:70px;
margin-left:10px;
margin-right:10px;
opacity:.6;
filter: alpha(opacity=60); /* For IE8 and earlier versions */
}

p {
font-weight: bold;
color: #fff;
text-align:center;
}
</style>
</head>
<body>
<div id=”poolTable”>
<div id=”box60″>
<p>Using transparency over an image effect 60%</p>
</div>
<div id=”box80″>
<p>Using transparency over an image effect 80%</p>
</div>

</div>
</body>
</html>

1.  We create a div element (poolTable) set the width/height and set the background image to our pool table.

2.  We create a div element (box60 and box 80).  Normally you wouldn’t name your elements like this; I did for purposes of this article.  In box60, the CSS opacity is set to 60% and in box80 the CSS opacity is set to 80%.  Note that the higher the number, the less transparent the element.

3.  We added text to both boxes and there you have it.

Design Element Tip:  In this example we used a black box with white text above it.  We could do this with any combination of colors.  White Box/Black Text just another example.

One thought on “CSS Opacity Property – Text Box

  1. Pingback: CSS Opacity and Transparency - JamesGirardi.com

Leave a Reply

Your email address will not be published. Required fields are marked *