PyQt5 QWebEngineView中HTML设置transparent背景不生效怎么办

解决方案 #

你需要额外对QWebEngineView和其绑定的QWebEnginePage设置透明属性，默认QWebEngine会自带白色底层背景，仅设置HTML和主窗口透明不生效，修改后的完整可运行代码如下：

import os
import sys
from PyQt5 import QtCore, QtWidgets, QtWebEngineWidgets
from PyQt5.QtWebChannel import QWebChannel

my_html = """<!DOCTYPE html>
<html lang="en">
<head>
<style>
    body {
        background-color: transparent;
    }

    #square {
        width: 200px;
        height: 200px;
        background-color: red;
        position: absolute;
        top: 100px;
        left: 100px;
    }
</style>
</head>
<body>
    <div id="square"></div>
</body>
</html>
"""


class Browser(QtWebEngineWidgets.QWebEngineView):

    def __init__(self, html):
        super().__init__()
        # 新增：设置Web页面本身背景透明
        self.setAttribute(QtCore.Qt.WA_TranslucentBackground)
        self.setStyleSheet("background: transparent;")
        self.page().setBackgroundColor(QtCore.Qt.transparent)
        
        self.url = QtCore.QUrl.fromLocalFile(os.getcwd() + os.path.sep)
        self.page().setHtml(html, baseUrl=self.url)


class Window(QtWidgets.QMainWindow):

    def __init__(self, html):
        super().__init__()
        self.html = html

        self.init_widgets()
        self.init_layout()
        self.setFixedSize(400, 400)

        self.setStyleSheet("background: transparent; border: transparent;")
        self.setWindowFlags(QtCore.Qt.WindowStaysOnTopHint | QtCore.Qt.FramelessWindowHint)
        self.setAttribute(QtCore.Qt.WA_TranslucentBackground)


    def init_widgets(self):
        self.browser = Browser(self.html)

    def init_layout(self):
        layout = QtWidgets.QVBoxLayout()
        # 新增：去掉layout的边距避免额外空白
        layout.setContentsMargins(0,0,0,0)
        layout.addWidget(self.browser)

        central_widget = QtWidgets.QWidget()
        # 新增：设置中心部件透明
        central_widget.setStyleSheet("background: transparent;")
        central_widget.setLayout(layout)
        self.setCentralWidget(central_widget)


def start():
    app = QtWidgets.QApplication(sys.argv)
    window = Window(my_html)
    window.show()
    app.exec_()


if __name__ == '__main__':
    start()

核心修改点 #

• 给QWebEngineView设置WA_TranslucentBackground属性和透明背景样式
• 调用page().setBackgroundColor(QtCore.Qt.transparent)将Web渲染层的默认背景设为透明
• 给中心部件和布局也设置透明、移除边距，避免外围多余白色区域

内容的提问来源于stack exchange，提问作者rugdog