Shulou(Shulou.com)06/01 Report--

This article is about creating transparent images through CSS. Xiaobian thinks it is quite practical, so share it with everyone for reference. Let's follow Xiaobian and have a look.

Example 1 -Creating a transparent image

The CSS3 attribute that defines transparency is opacity.

First, we'll show you how to create transparent images with CSS.

Regular images:

Same image with transparency:

Please see CSS below:

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

IE9, Firefox, Chrome, Opera and Safari use the opacity attribute to set transparency. The opacity property can be set to values from 0.0 to 1.0. The smaller the value, the more transparent.

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

Example 2 -Image Transparency- Hover Effect

Move the mouse pointer over the image:

CSS is like this:

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 CSS code block is similar to the code in Example 1. In addition, we have set the style when the mouse pointer is over the image. In this example, we want the image to be opaque when the pointer moves over it.

The CSS is opacity=1.

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

When the mouse pointer moves out of the image, the image becomes transparent again.

Example 3 -Text in a 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. This is some text that is placed in the transparent box.

The source code looks like this:

div.background{ width: 400px; height: 266px; background: url('/i/tulip_peach_blossom_w.jpg') no-repeat; border: 1px solid black;}div.transbox{ width: 338px; height: 204px; margin:30px; background-color: #ffffff; border: 1px solid black; /* for IE */ filter:alpha(opacity=60); /* CSS3 standard */ opacity:0.6;}div.transbox p{ margin: 30px 40px;}

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.

First, we create a div element (class="background") with a fixed height and width, background image, and border. Then we create a slightly smaller div (class="transbox") inside the first div. The "transbox" div has a fixed width, background color, and border-and it's transparent. Inside the transparent div, we added some text to the p element.

Thank you for reading! About "how to create transparent images through CSS" this article is shared here, I hope the above content can be of some help to everyone, so that everyone can learn more knowledge, if you think the article is good, you can share it to let more people see it!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.