19 March 2008

Creating transparent images with CSS

Posted by: admin in Uncategorized

Do you have a website and wish to create images that are transparent? You can do them very easily with CSS, say, in a few steps. I’ll demonstrate with examples on how to create transparent images.

Use the following code to create transparent images:

<html>
<head>
<style type=”text/css”>
img
{
opacity:0.4;
filter:alpha(opacity=40)
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<img src=”<Give the name of the .jpg file here” width=”150″ height=”113″ alt=” Give the name of the .jpg file here”
onmouseover=”this.style.opacity=1;this.filters.alpha.opacity=100″
onmouseout=”this.style.opacity=0.4;this.filters.alpha.opacity=40″ />

When you use the above code in your web, images become visible when the mouse is rolled over.

How about creating a transparent box with text inside it? Wow…

<html>
<head>
<style type=”text/css”>
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;
filter:alpha(opacity=60);
opacity:0.6;
}
div.transbox p
{
margin: 30px 40px;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body><div class=”background”>
<div class=”transbox”>
<p>Give the text here.
</p>
</div>
</div>
</body>
</html>

Give a beautiful look to your website with transparent images.

Tags: Creating transparent images with CSS

Uncategorized,

Subscribe,

(No Ratings Yet)

107 views

This entry was posted on 19 March 2008 at 6:24 AM and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.