Transparent QWebView (or QWebPage)

Published Tuesday June 30th, 2009
8 Comments on Transparent QWebView (or QWebPage)
Posted in Graphics Dojo, WebKit

If you use QWebView, do you know how make its background to be translucent? Apparently, the trick is not so well known, hence I decide to share it here.

Basically it boils down the following code snippet:

QPalette palette = view->palette();
palette.setBrush(QPalette::Base, Qt::transparent);
view->setAttribute(Qt::WA_OpaquePaintEvent, false);

The first three lines set a new transparent brush for the page. This is necessary so that all the painting is blended properly. The last one ensures that the web view is not opaque, i.e. it does not paint all the pixels contained in its rectangle. Opaque paint event for QWebView is the default, most of the time you want to have a web page with typical normal background color, either set by the web page or something you specify as the fallback color.

If you combine QWebView see-through background with top-level widget opacity feature (see what Samuel wrote about this some time ago), you will get something like the following screenshot (the wallpaper image is Soft Green, from Valient Gough). Neat, isn’t it? Note that of course it requires a window system which supports composition, e.g. modern X11 window manager, recent versions of Windows, and so on.

As usual, the code for this short example is available from the git repository, just check the transparentweb subdirectory. Again, I already prepared both the Qt/C++ and Python (via PyQt) versions. Enjoy!

Do you like this? Share it
Share on LinkedInGoogle+Share on FacebookTweet about this on Twitter

Posted in Graphics Dojo, WebKit


Kit says:

You spoil us πŸ˜‰

J says:

I tried to follow this on embedded Linux, it works except when the web view is reloaded it seems the background is not being repainted correctly, it appears like the background is being painted over and over as we reload the page. For example, if we give background color rgba(0,0,0,128), eventually the background would just appear as black.

Is there anything else I could do?

Hi ariya,

I have attended your talk on Qt Graphics at the LinuxTag in Berlin. I just wanted to thank you for the intesting facts and the stunning demos. It was the best talk on LinuxTag that day (wasn’t there the other days, so I cannot judge :)). You have convinced me even more to use Qt and gave alot of inspirations. Hope I can use some of your techniques in my own Qt-apps.

Again, great talk.



ariya says:

@J: Yes. Please create a minimalistic test program that demonstrates the problem (do not forget to state the Qt version and compiler versions) and go to to report it. Thank you!

ariya says:

@Adrian: Thanks, and I am glad that you enjoy the talk! πŸ™‚

Dragan says:

Is the fix for this feature in QWS [250115] likely to be back portable to 4.5.x stream?

Qt-user says:

hi,i’m searching for the flash pluging that can work on Wince6.0,and i wonder where can i get it? thank you!

Alan says:

I’m trying to do this using Ubuntu Linux 9 (qt 4.5) but the transparency just dont work.

Someone have any ideas?

Commenting closed.

Get started today with Qt Download now