Background Images | Transparent PNG images play a very important role in web design, using the features of PNG images to produce practical, gorgeous results, but the support for PNG images is not ideal, Firefox and opera support PNG better, especially Firefox browser. But IE ignored PNG, making it impossible for designers to use PNG pictures at random.
The ie5.5+ alphaimageloader filter provides a way to PNG, and 0%-100% transparency is provided if he loads the PNG (Portable Network Graphics) format. We use this filter and hack to design a model for translucent PNG background pictures
X HTML: <div id= "Wrap" >
<p><a href= "http://www.jluvip.com" ><strong>png Translucent background image effects </strong></a><br/> : PNG images play a very important role in web design, using the features of PNG images to create the need to use gorgeous results, but the support for PNG pictures is not very ideal, Firefox and opera for PNG support is better, especially Firefox browser. But IE ignore PNG, the designer is not very casual use of PNG pictures. </p>
The <p>ie5.5+ alphaimageloader filter provides a way to PNG, and 0%-100% transparency is provided if he loads the PNG (Portable Network Graphics) format. We use this filter and hack to design a translucent PNG background image model.
</p>
<p><a class= "test" href= "http://www.jluvip.com" > here is a hyperlink test </a></p>
</div>css: #wrap {width:460px;margin:20px auto 20px 80px;text-align:left;height:300px; padding:20px; border:1px #eee solid;}
/*not for IE 6.0*/
Html>body #wrap {background:url (/uploadpic/2007-4/200741152027417.png) repeat;}
/*for IE 6.0*/
* HTML #wrap {
Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (Enabled=true, Sizingmethod=scale, src= "/uploadpic/ 2007-4/200741152027417.png ");
Background:none;
}
#wrap a{color: #c00; text-decoration:none; position:relative;} * * Solve the problem of IE link failure
#wrap a:hover{Text-decoration:underline;}
Effect Preview
Tested, compatible IE6.0 Firefox 1.5 Opera 8.5, because the AlphaImageLoader filter does not support IE5.0, so IE5.0 did not achieve the desired effect, the basic IE5.0 and PNG missed.
about the AlphaImageLoader filterQuotes from
CSS2.0 HandbookGrammar:
Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=benabled, Sizingmethod=ssize, Src=surl)
Property:
Enabled: Optional. A Boolean value (Boolean). Sets or retrieves whether the filter is active. true | False
True: default values. Filter activation.
False: The filter is prohibited.
Sizingmethod: options available. String. Sets or retrieves how a picture of a filter's object is displayed within the bounds of the object container. Crop: cut the picture to fit the object size.
Image: default value. Increase or decrease the size boundaries of an object to fit the size of the picture.
Scale: scales the picture to fit the object's dimension boundaries.
SRC: required option. String. Specifies the background image using an absolute or relative URL address. If you omit this parameter, the filter will not function.
Description
Within the bounds of the object container, display a picture between the object's background and content. and provides an operation to cut and resize the picture. If the PNG (Portable Network Graphics) format is loaded, the transparency of 0%-100% is also provided.
The transparency of the pictures in PNG (Portable network Graphics) format does not prevent you from selecting text. That is, you can choose to display the contents behind the fully transparent area of the picture in PNG (Portable Network Graphics) format.
