CSS Opacity Settings

Here we’ll show you how to alter the opacity of an HTML element using the CSS3 opacity property.

Example HTML & CSS Code:

<!DOCTYPE html>
<html>
<head>
<title>320px by 480px</title>
<style>
#iPhoneBox{
width: 320px;
height: 480px;
border:2px solid #333;
background-color: #444;
}

#iPhoneBox img{
opacity: 0.5;
}
</style>
</head>
<body>
<div id=”iPhoneBox”>
<img src=”football.jpg” width=”320px” alt=”NFL 2015″ />
</div><!–/iPhoneBox–>
</body>
</html>

If you take note of the style section on the head part of the above HTML code, you can see that I have made the image have a solid background color. You can experiment with the color used here to give the opaque image different effects. Also experiment with the opacity setting of the image which can be anything between 0 and 1.

Leave a Reply

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