How to make images transparent using CSS

Creating transparent images with CSS is easy.                                                                                                                                                                                                 (Recommended learning: CSS Tutorial)

Note: The CSS opacity property is part of the W3C CSS recommended standard.

Example 1 - Create a transparent image

The CSS3 property that defines the transparency effect is opacity.

First, we will show how to create transparent images through CSS.

Regular image:

Same image with transparency:

See the following CSS:

img
{
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */}

IE9, Firefox, Chrome, Opera and Safari use the opacity property to set transparency. The opacity property can be set to values ​​from 0.0 to 1.0.

The smaller the value, the more transparent it is. IE8 and earlier use the filter filter:alpha(opacity=x). x can take values ​​from 0 to 100. The smaller the value, the more transparent it is.

The above is the detailed content of How to make images transparent using CSS. For more information, please follow other related articles on the PHP Chinese website!