CSS Image Opacity / Transparency
Creating transparent images with CSS is easy.
Note: The CSS opacity property is a part of the W3C CSS3 recommendation.
Example 1 - Creating a Transparent Image
The CSS3 property for transparency is opacity.
First we will show you how to create a transparent image with CSS.
Regular image:
The same image with transparency:
Look at the following CSS:
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
IE9, Firefox, Chrome, Opera, and Safari use the property
opacity for transparency. The opacity property can take a value from 0.0 - 1.0.
A lower value makes the element more transparent.
IE8 and earlier use filter:alpha(opacity=x). The x can take
a value from 0 - 100. A lower value makes the element more transparent.
Example:-
<html>
<head>
<style type="text/css">
div.background
{
width: 500px;
height: 250px;
background: url(Sunset.jpg) repeat;
border: 2px solid black;
}
div.transbox
{
width: 400px;
height: 180px;
margin: 30px 50px;
background-color:
#ffffff;
border: 1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For
IE8 and earlier */
}
div.transbox p
{
margin: 30px 40px;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in
the transparent box.
This is some text that is
placed in the transparent box.
This is some text that is
placed in the transparent box.
This is some text that is
placed in the transparent box.
This is some text that is
placed in the transparent box.
</p>
</div>
</div>
</body>
</html>
0 comments:
Post a Comment