首页 > 解决方案 > 如何在 QWebEngineView 中设置背景图片

问题描述

我正在使用来自 QtWebEngineWidgets 的 QWebEngineView 来显示图像,并且我想将其作为背景图像。但它没有显示任何东西。我怎样才能做到这一点?

我也尝试了 QtWebKitWidgets 中的 QWebView,但它仍然无法正常工作。

这是我的代码:

    view = QtWebEngineWidgets.QWebEngineView()
    html = """
    <html>
        <head>
            <style>
                body{background-image:url("D:\\house.jpg");}
            </style>
        </head>
        <body></body>
    </html>"""

    view.setHtml(html)

我希望视图将图像 house.jpg 显示为背景,但它只显示一个白色窗口

标签: pythonpyqt5background-imageqwebengineview

解决方案


无效 QWebEnginePage::setHtml(const QString &html, const QUrl &baseUrl = QUrl())

将此页面的内容设置为 html。baseUrl 是可选的,用于解析文档中的相对 URL,例如引用的图像或样式表。

在 Windows 上测试。

import sys
from PyQt5.QtWidgets import QApplication
from PyQt5.QtWebEngineWidgets import QWebEngineView
from PyQt5.QtCore import QTimer, QDateTime, QUrl

html = """
<html>
  <head>
    <meta charset="utf-8">
    <title>background-image</title>
    <style>
      body {
        background-image: url('file:///D:/_Qt/Python-Examples/_PyQt5/Image/logo.png');
        background-color: #c7b39b;               
      }
      p {
        color: #f00;
        font: bold italic 20pt 'Comic Sans MS';
      }
    </style>
  </head>
  <body>
    <p>Hello World</p>
  </body>
</html>
"""

def append():
    some_html = "<p>{}</p>".format(QDateTime.currentDateTime().toString())
    page.runJavaScript("document.body.innerHTML += '{}'".format(some_html)
    )


if __name__ == '__main__':
    app = QApplication(sys.argv)

    view = QWebEngineView()

    timer = QTimer()
    timer.timeout.connect(append)
    page = view.page()
    page.loadFinished.connect(lambda: timer.start(1000))

    page.setHtml(html, baseUrl=QUrl('file://'))                   # <---

    view.show()
    sys.exit(app.exec_())

在此处输入图像描述


推荐阅读