Menu
I have made a web page that consists of two overlapping images. I have applied an opacity filter to the top image so that both images are readable. The opacity is correct on the screen for most browsers including IE and Firefox. However, when I print the page to a real printer or to a PDF printer from IE version 7 or 8, only the top image is printed. The top image is correctly translucent when printing from IE 9 and Firefox.
Below is the code of my web page.
<html>
<body>
<DIV style="POSITION: absolute; WIDTH: 366px; HEIGHT: 439px; TOP: 100px; LEFT: 100px; Z-INDEX: 1;">
<IMG style="POSITION: relative; WIDTH: 366px; HEIGHT: 439px;" src="below_picture.png">
</DIV>
<DIV style="POSITION: absolute; WIDTH: 366px; HEIGHT: 439px; TOP: 100px; LEFT: 100px; Z-INDEX: 390;">
<IMG style="POSITION: relative; WIDTH: 366px; HEIGHT: 439px; FILTER: alpha(opacity=75);" src="above_picture.png">
</DIV>
</body>
</html>
Which css style do I need to set for opacity when printing from Internet Explorer 8?
729
Try this it will give a blur effect in all the major browser including
.CLASS_NAME {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
/* other intelligent browsers */
opacity: 0.5;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
