CSS Image Opacity / Transparency
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.
Syn:
Look at the following CSS:
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
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 2 -
Image Transparency - Hover Effect
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
filter:alpha(opacity=100); /* For IE8 and earlier */
}
The first CSS block is similar to the code in Example 1. In
addition, we have added what should happen when a user hover over one of the
images. In this case we want the image to NOT be transparent when the user
hover over it.
The CSS for this is: opacity=1.
IE8 and earlier: filter:alpha(opacity=100).
When the mouse pointer moves away from the image, the image will be
transparent again.
Example 3 -
Text in Transparent Box
The source code looks like this:
<html>
<head>
<style>
div.background
{
width:500px;
height:250px;
background:url(klematis.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>
<head>
<style>
div.background
{
width:500px;
height:250px;
background:url(klematis.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>
First, we create a div element (class="background") with
a fixed height and width, a background image, and a border. Then we create a
smaller div (class="transbox") inside the first div element. The
"transbox" div have a fixed width, a background color, and a border -
and it is transparent. Inside the transparent div, we add some text inside a p
element.
No comments:
Post a Comment