CSS Image Opacity

It is easy to create transparent images using CSS.

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

Example 1-Create a transparent image

The transparency of the property in CSS3 is opacity .

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

Normal image

klematis

The same image has transparency:

klematis

Take a look at the following CSS:

img { opacity: 0.4

  ;
   filter: alpha ( opacity = 40 ); /* IE8 and earlier versions */ }

IE9, Firefox, Chrome, Opera, and Safari browsers use the transparency property to make the image opaque. The value of the Opacity attribute ranges from 0.0-1.0. The smaller the value, the more transparent the element.

IE8 and earlier versions use filter: alpha (opacity=x). The value x can take is from 0-100. A lower value makes the element more transparent.

Example 2-Transparency of the image-hovering effect

Move the mouse over the image:

klematisklematis

CSS style:

img { opacity: 0.4

  ;
   filter: alpha ( opacity = 40 ); /*   IE8 and earlier versions */ } img :hover { opacity: 1.0



  ;
   filter: alpha ( opacity = 100 ); /* IE8 and earlier versions */ }

The first CSS block is similar to the code in Example 1. In addition, we have added what happens when the user hovers over one of the images. In this case, when the user hovers over the image, we want the image to be clear.

This CSS is: opacity=1 .

IE8 and earlier versions use: filter:alpha(opacity=100) .

When the mouse pointer moves away from the image, the image will have transparency again.

Example 3-Text in a transparent box

The source code is as follows:

< ! DOCTYPE html > < html > < head > < meta charset = " utf-8 " > < style > 


 
div .background { width: 500 px

  ;
   height: 250 px;
   background: url ( https :// www . runoob . com / images / klematis . jpg ) repeat;
   border: 2 px solid black  ;
 } div .transbox { width: 400 px


  ;
   height: 180 px;
   margin: 30 px 50 px ;
   background-color: #ffffff;
   border: 1 px solid black  ;
   opacity: 0.6;
   filter: alpha ( opacity = 60 ); /* IE8 and earlier versions */ } div .transbox p { margin: 30 px 40 px

 

   ;
   font-weight: bold;
   color: #000000;
 }
</ style > </ head > < body > < div class = " background " > < div class = " transbox " > < p > The text is in a transparent box. The text is in a transparent box. The text is in a transparent box. The text is in a transparent box. The text is in a transparent box. The text is in a transparent box. The text is in a transparent box. The text is in a transparent box. The text is in a transparent box. The text is in a transparent box. The text is in a transparent box. The text is in a transparent box. The text is in a transparent box.
</ p > </ div > </ div > </ body > </ html >

First, we create a fixed height and width div element with a background image and border. Then we create a smaller div element inside the first div. This div also has a fixed width, background color, border-and it is transparent. Inside the transparent div, we add some text inside the P element.