Latest web development tutorials

CSS image transparent / opaque

Using CSS is easy to create a transparent image.

Note: CSS Opacity property is part of the W3C CSS3 recommendations.

Examples

More examples

Create a transparent image - hover effect

Create a text box has a transparent background image

Example 1 - Create a transparent image

Transparency in CSS3 property isopacity.

First, we will show you how to create a transparent image with CSS.

Normal image

klematis

The same image with transparency:

klematis

Consider the following CSS:

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

IE9, Firefox, Chrome, Opera, and Safari browser uses the transparency properties of the image may become opaque. Opacity property value from 0.0 - 1.0. Smaller values ​​make the element more transparent.

IE8 and earlier versions use filter: alpha (opacity = x). X can take values ​​from 0 - 100. Lower values ​​make the element more transparent.

Example 2 - Image Transparency - hover effect

Move your mouse over the image:

klematisklematis

CSS style:

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 */
}

The first block is the CSS code in Example 1, and the like. In addition, we also added what happens when the user moves the mouse hovers over one of the images. In this case, when the user moves the mouse over the image, we hope that the picture is clear.

This isCSS: opacity = 1.

IE8 and earlieruse: filter: alpha (opacity = 100 ).

When the mouse pointer away from the image, the image will be re-transparency.

Example 3 - Transparent box text

The text in the transparent box. The text in the transparent box. The text in the transparent box. The text in the transparent box. The text in the transparent box. The text in the transparent box. The text in the transparent box. The text in the transparent box. The text in the transparent box. The text in the transparent box. The text in the transparent box. The text in the transparent box. The text in the transparent box.

Source code is as follows:

<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 fixed height and width of the div element with a background image and border. Then we create a smaller div elements inside the first div. This div also have a fixed width, background color, border - and it is transparent. Inside the transparent div, we add some text inside the P element.