Coding Transparent Backgrounds and Images With CSS3
February 9th, 2010
Transparency has always been a stumbling block for web designers. However, thanks to CSS3, that is quickly changing. In this tutorial, I’ll show you how to use CSS3 to easily add transparency to backgrounds and images.
Browser support
At the time of this post, Webkit, Gecko, Opera, Firefox 3+, and IE7 support transparency. There’s more detailed browser support information available at .
Coding a transparent background
The property value used for adding opacity to an element is rgba. See below for an example of it in use. As you’ll see, I’ve created a class named box, with a black background, set at 50% opacity. The first three numbers refer to the R-G-B values of the color you are using. The fourth number refers to opacity. Since I want an transparency of 50%, I’ve set the value to 0.5. The scale of opacity goes from 0 to 1. Zero being completely transparent, and 1 being no transparency. For example, 20% opacity would be 0.2.
.box {
background-color: rgba(0,0,0,0.5);
}
Here’s what it looks like
After adding a few more styles to our box class, it ends up looking like this.
.box
Here’s the additional styles I added to the box class if you’d like to use them.
.box {
background-color: rgba(0,0,0,0.5);
color: #fff;
height: 200px;
line-height: 200px; /* vertically centers text */
text-align: center;
width: 200px;
}
Adding transparency to an image
Adding transparency to an image takes a little more CSS. If you would like to apply opacity to a unique image, you need to create an ID for it. If you’d like to apply opacity to more than one image, we can write a class for that too. First of all, let’s write an ID for a unique image. For the tutorial, I’m going to use a photo I took in Santa Monica last year.
Here’s what the CSS looks like:
#santa-monica img {
opacity: 0.5;
}
Here’s what the HTML looks like
<html>
<head>
<title>Santa Monica Image</title>
</head>
<body>
<div id="santa-monica"><img src="http://www.flickr.com/photos/cardeo/3921409442/"></div>
</body>
</html>
Here’s what it looks like
The first photo is set to 100%. I’ve set the second image’s opacity to 50% percent.
Adding transparency to multiple images
If you’d like to add transparency to multiple images, we can write a quick class that you can add to your <img /> tag. For this example, we’ll create a class to display images at 75% opacity.
Here’s what the CSS looks like
img.opacity75 {
opacity: 0.75;
}
Here’s what the HTML looks like
<img src="yourimage.jpg" class="opacity75" />
Here’s what it looks like
Your left with an image with a 75% opacity. As well as, a class that allows you to apply the transparency to multiple image.
Class vs ID
The opacity75 class can be rewritten into other classes, with different opacity values if you like. For example, you could have opacity25, opacity50, and opacity75 classes. If you are going to be using different opacities on multiple images, this is the way to go. Using a unique ID for an image is only recommended if you only have a couple images. Going that route with a large batch of images is going to take way more coding. If you have a big library of images, do yourself a favour and use a couple classes.
Print This Post
Follow me