CSS transparency


Let's imagine a page with an image on it. The image has been given an id, and the name of the id is transparentimg.

How can we set the image to be totally or partially transparent?
Using code like this:


<!DOCTYPE html>
<html>	

<head>
<title>Star dim</title>

<style>

#transparentimg {
    opacity: 0.7;  /* This means it will have 70% opacity */
}

</style>
</head>

<body>

<img src="star.gif" alt="star" width="80" height="80" id="transparentimg">

</body>
</html>


Opacity can be set from 0.0 up to 1.0.

An opacity of 0.0 means the image will be totally transparent.
An opacity of 1.0 means the image will be totally opaque (not transparent at all).

CSS can set practically any element to be transparent, not only images.

Learn more at: http://www.w3schools.com/css/css_image_transparency.asp