Creating transparent images with CSS is easy.
The CSS
opacity property is a part of the 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:
Example
img
{
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
The
opacity property can take a value from 0.0 - 1.0. The lower value,
the 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 2 - Image Transparency - Hover Effect
Mouse over the images:
The CSS looks like this:
Example
img
{
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
img:hover {
opacity: 1.0;
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 hovers over one of the images. In this case we want the image to NOT be
transparent when the user hovers over it. The CSS for this is
opacity=1;.
When the mouse pointer moves away from the image, the image will be transparent again.
Example 3 - Text in Transparent Box
This is some text that is placed in the transparent box.
The source code looks like this:
Example
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
margin: 5%;
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.</p>
</div> </div>
</body> </html>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
margin: 5%;
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.</p>
</div> </div>
</body> </html>
First, we create a <div> element (class="background") with a background image, and a border.
Then we create another <div> (class="transbox") inside the first <div>. The
<div class="transbox"> have a background color, and a border -
the div is transparent. Inside the transparent
<div>, we add some text inside a <p> element.
No comments:
Post a Comment