Geek Answers Handbook

What css style do I need to set for opacity when printing from Internet Explorer 8?

I created a webpage consisting of two overlapping images. I applied an opacity filter to the top image so that both images are legible. For most browsers, transparency is transparent on the screen, including IE and Firefox. However, when I print a page on a real printer or in a PDF printer from IE version 7 or 8, only the top image is printed. The top image displays correctly when printing from IE 9 and Firefox.

Below is the code for my webpage.

<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>

What css style do I need to set for opacity when printing from Internet Explorer 8?

+5
source share
4 answers

, ,

.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;
}
+6

, IE, ,

, , IE7-8, css

.opaque2 {  // for IE5-7

    filter: alpha(opacity=50);
}

IE8

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";


.opaque {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // first!
    filter: alpha(opacity=50);                  // second!
}

, css3pie, htc, css3 , .

, ..

+4

IE8 -ms-filter.

IE filter: alpha(opacity=XX)

img.namedClass {
    position: relative;
    width: 366px;
    height: 439px;

    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: alpha(opacity=75);
    opacity: 0.75;
}

, ,

+1
source

I think the error is in positioning. You use the absolute position in the parent div, while your child is the position: relative..it will not work on IE..and then use the opacity on the div not on the image..cheers ..

0
source

More articles:


All Articles