[webkit-qt] WebView with Transparent Background

Mon Nov 8 11:10:09 PST 2010

Hi,

I'm quite new to Qt and am planning on using it for an upcoming project. I'm
currently just writing small test programs that implement each bit of
functionality I need before I throw myself into properly learning Qt, so
apologies if this is a bit of a newbie question.

I'm currently trying to get a webkit widget with a transparent background so
that if, in an HTML document, the html and body nodes are styled to have
their background-color set to transparent then the Widgets behind the
WebView Widget are visible through. I've had a play myself, browsed the API
documentation and done some searching and come up with a couple of things
but nothing has worked properly so far.

This is the code I have currently:

#include <QApplication>
#include <QWebView>
#include <QWebSettings>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    QWidget window;
    window.resize(1280, 720);

 QWebSettings::globalSettings()->setAttribute(QWebSettings::DeveloperExtrasEnabled,
true);

    QWebView *view = new QWebView(&window);

    QPalette pal = view->palette();
    pal.setBrush(QPalette::Base, Qt::transparent);
    view->setPalette(pal);

//    view->setAutoFillBackground(false);
//    view->setAttribute(Qt::WA_OpaquePaintEvent);
    view->load(QUrl("test.html"));
    view->setGeometry(10, 10, 1260, 680);

    window.show();

    return app.exec();
}

and the HTML document I'm displaying:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
                <title>Transparency Test</title>
                <style type="text/css">
                        html,body,div,img {
                                background-color: transparent;
                        }
                </style>
        </head>
        <body>
                <h1>Hello World!</h1>
        </body>
</html>

This does makes some bits transparent, unfortunately it also seems to make
the parent QWidget window transparent as well and just shows the console
window beneath the window. How do I go about making just the QWebView's
background transparent?

Thanks for any help,

Mike
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-qt/attachments/20101108/3f510a65/attachment.html>