Apply opacity to an image?
<html>
<head></head>
<body>
<img src="http://images.northrup.org/picture/xl/pig/baby-pig-2.jpg" style="opacity:0.5;" />
</body>
</html>
Given that bit of code, I would expect the PDF produced to have a half-transparent picture of a baby pig in it. Sadly, opacity doesn't seem to apply.
Given a brief glance at the posts on the topic in the forums here, it *seems* like “opacity” isn't a supported CSS property. Is that correct?
Yes, at the moment Prince partially supports opacity for SVG shape elements, and you can also apply translucent RGBA colors. But there is no way at the moment to make a partially transparent image, unless you modify the alpha channel of the image before running Prince. We aim to fix this in a future release.
Hello, I'm experiencing the same opacity issue and found this post from a google search. Just checking to see if there has been any update on opacity support in Prince? I'm using Prince 9.0 via DocRaptor.
Thanks,
Ken
Not yet, at the moment you need to convert the image to a PNG with an alpha channel to achieve the same effect.
Hi Mike, thanks for the quick reply. Does the same opacity issue apply for <div> elements too? I'm finding div elements with an opacity:0.5 and a solid background colour are also rendered opaque in the pdf.
Thanks!
Ken
Yes, opacity isn't good for much at the moment, although it's partially faked in SVG. For elements with solid RGB color, you can substitute the equivalent RGBA color for opacity, eg. "color: rgba(255, 0, 128, 0.5)".
Hi Mike,
The RGBA trick for elements has saved me! I'm converting background-color: #rrggbb; opacity: x; to background-color: rgba(r,g,b,x); and it's producing exactly what I need.
Thanks again,
Ken
Great!
Prince 9 rev 5 is now available, and includes support for the opacity property on image elements.
