Log in / Register

Forum › Bugs

Opacity css not obeyed

JamesSas
Greetings,
Let me first say that this product is saving my bacon. Anyhow, I've got an opacity issue that I haven't been able to solve on my own. I've prepared a short test case:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Opacity Test</title>
        <style type="text/css">
            div.infront {
                        width:200pt;
                        height:200pt;
                        position:absolute;
                        left:0;
                        top:0;
                        background-color:green;
                        opacity:.4;
            }
        </style>
    </head>
    <body>
        This text should be visible through the mask.
        <div class="infront"></div>
    </body>
</html>


In the above example, a 200x200 green square should appear over the text. In the output, the square is fully opaque. Am I missing something obvious?

I am testing with the PC trial, version 6.0 rev 5.

Thanks in advance.
JamesSas
Greetings,
I've constructed a workaround using inline SVG.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:svg="http://www.w3.org/2000/svg">
    <head>
        <title>Opacity Test</title>
        <style type="text/css">
            div.infront {
                        position:absolute;
                        overflow:visible;
                        left:0;
                        top:0;
            }
        </style>
    </head>
    <body>
        This text should be visible through the mask.
        <div class="infront">
         <svg:svg width="200pt" height="200pt" >
            <svg:g fill="green">
                <svg:rect x="0" y="0" width="200pt" height="200pt" style="opacity:.4" />
            </svg:g>
         </svg:svg>
        </div>
    </body>
</html>
mikeday
Another option is to use RGBA colors, eg. rgba(0, 255, 0, .4) for the background.
rolandw
I am trying to use opacity on an image. I have a simple test:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Image opacity test</title>
</head>
<body>
<h1>This image should be opaque</h1>
<img style="opacity: 1;"
     src="http://www.quru.com/images/banners/london1.jpg"
     alt="london"/>
<h1>This image should be transparent</h1>
<img style="opacity: 0.2;"
     src="http://www.quru.com/images/banners/london1.jpg"
     alt="london"/>
</body>
</html>


which looks lovely in Webkit/Safari and Firefox 3 and should (according to the manual) work in Prince but Prince 6.0 rev 5 just ignores the opacity style.

Any ideas for getting opacity on an image?
mikeday
Unfortunately the opacity property is not working in this manner at the moment. However, you can achieve this effect by creating a PNG image with an alpha channel that has the desired opacity.
EvanHaas
We are on 9.0 rev 4 Professional, and this opacity bug still exists. Just wanted to refresh this thread and see if it might be on the map for an upcoming release. Thanks!
mikeday
Not yet, JavaScript and tagged PDF support are currently the focus of our development efforts.
mikeday
Actually on second thoughts, we just fixed an SVG issue relating to opacity on images, so perhaps we can extend this to regular CSS images as well. Give us a few days and we'll try it out. :)
jim_albright
I love watching you fix things faster than you planned. :)

Jim Albright
Wycliffe Bible Translators

mikeday
It's great isn't it. :)

Anyway, we will be supporting the opacity property on image elements in the next maintenance release. So that's good. It will be released shortly, after we sort out a couple of other minor issues.
mikeday
Prince 9 rev 5 is now available, and includes support for the opacity property on image elements.
EvanHaas
Awesome, this works great in 9 rev 5. Any chance of extending it to other (non-image) elements?
mikeday
Not in the short-term, it's a bit tricky. But you can use rgba() colors for text and backgrounds.
joelmeador
Support for non-image elements has come up a few times on DocRaptor. This is not super high priority for us but it would certainly be nice. Thankfully the rbga workaround generally solves the problem. :D
mikeday
Full support for opacity is available in latest builds!

Edited by mikeday

joelmeador
Nice. Are those going to be in a Prince 11 minor version, or saved for next major version? For reasons unknown we've had like 5 requests for opacity support in the last 4w. :D

• • • • •

@mikeday, if it's not obvious, I really appreciate your responsiveness.
mikeday
I would like to include opacity support and recent SVG improvements in an 11.2 release.
joelmeador
👍😊👍