Window Webview2 transparency support

[ODtian]

Specification

• pywebview version: 3.4
• operating system: Windows 10
• web renderer: edge chromium

Description

it seems easy to make the window become transparent by setting
webView2.DefaultBackgroundColor = System.Drawing.Color.Transparent;
If this is supported, that'll be cool.

Practicalities

• YES/NO I am willing to work on this issue myself.

• YES/NO I am prepared to support this issue financially.

[r0x0r]

Have you tested it?

[ODtian]

Yes, I update the dll to version 1.0.902 and set the prop

self.web_view.DefaultBackgroundColor = Color.Transparent

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Timoses]

I did some research previously as I am looking for a way to display a transparent window as well and found this:

import sys
from PyQt5.QtCore import pyqtSlot
from PyQt5.QtGui import *
from PyQt5 import QtCore
from PyQt5.QtWidgets import *
from PyQt5.QtCore import pyqtSignal
from PyQt5.QtCore import *


class MyNotification(QMainWindow):

    def __init__(self):

        QMainWindow.__init__(self)

        # < Styles >
        self.background_style_css = "background-color: rgba(22, 160, 133, 100); border-radius: 4px;"
        self.close_button_style_css = """
                                        QPushButton{
                                                    background-color: none;
                                                    color: white; border-radius: 6px;
                                                    font-size: 18px;
                                                    }
                                    """
        # </ Styles >

        # < Global Settings >
        self.setFixedSize(510, 210)
        self.move(400, 30)
        # </ Global Settings >

        # < Main Style >
        self.main_back = QLabel(self)
        self.main_back.resize(500, 200)
        self.main_back.setStyleSheet(self.background_style_css)
        # </ Main Style >

        # < Text Label >
        self.text_label = QLabel(self)
        self.text_label.move(10, 5)
        self.text_label.resize(300, 100)
        self.text_label.setText("Hi YUVI, How are You ? :)")
        # < Text Label >

        # < Header Style >
        self.setWindowFlags(QtCore.Qt.FramelessWindowHint)
        self.setAttribute(QtCore.Qt.WA_TranslucentBackground)

        # This Line Set Your Window Always on To
        self.setWindowFlags(Qt.SplashScreen | Qt.WindowStaysOnTopHint)
        # </ Header Style >

    def terminal_ask(self):

        while True:

            print("If you want to close this window, type stop: ")

            get_input = input()

            if get_input.lstrip().rstrip().lower() == "stop":
                self.close_window()

            else:
                print("Invalid Syntax, Try it again.")

            QApplication.processEvents()

    def close_window(self):

        self.close()
        sys.exit()


if __name__ == '__main__':

    My_Application = QApplication(sys.argv)
    MainWindow = MyNotification()
    MainWindow.show()
    MainWindow.terminal_ask()
    sys.exit(My_Application.exec_())

(https://stackoverflow.com/questions/47121960/python-project-text-to-screen-on-transparent-unobtrusive-overlay-box/47123665#47123665)

The line that does the trick seems to be:

self.setAttribute(QtCore.Qt.WA_TranslucentBackground)

The result from above looks like this:

[ODtian]

I did some research previously as I am looking for a way to display a transparent window as well and found this:

import sys
from PyQt5.QtCore import pyqtSlot
from PyQt5.QtGui import *
from PyQt5 import QtCore
from PyQt5.QtWidgets import *
from PyQt5.QtCore import pyqtSignal
from PyQt5.QtCore import *


class MyNotification(QMainWindow):

    def __init__(self):

        QMainWindow.__init__(self)

        # < Styles >
        self.background_style_css = "background-color: rgba(22, 160, 133, 100); border-radius: 4px;"
        self.close_button_style_css = """
                                        QPushButton{
                                                    background-color: none;
                                                    color: white; border-radius: 6px;
                                                    font-size: 18px;
                                                    }
                                    """
        # </ Styles >

        # < Global Settings >
        self.setFixedSize(510, 210)
        self.move(400, 30)
        # </ Global Settings >

        # < Main Style >
        self.main_back = QLabel(self)
        self.main_back.resize(500, 200)
        self.main_back.setStyleSheet(self.background_style_css)
        # </ Main Style >

        # < Text Label >
        self.text_label = QLabel(self)
        self.text_label.move(10, 5)
        self.text_label.resize(300, 100)
        self.text_label.setText("Hi YUVI, How are You ? :)")
        # < Text Label >

        # < Header Style >
        self.setWindowFlags(QtCore.Qt.FramelessWindowHint)
        self.setAttribute(QtCore.Qt.WA_TranslucentBackground)

        # This Line Set Your Window Always on To
        self.setWindowFlags(Qt.SplashScreen | Qt.WindowStaysOnTopHint)
        # </ Header Style >

    def terminal_ask(self):

        while True:

            print("If you want to close this window, type stop: ")

            get_input = input()

            if get_input.lstrip().rstrip().lower() == "stop":
                self.close_window()

            else:
                print("Invalid Syntax, Try it again.")

            QApplication.processEvents()

    def close_window(self):

        self.close()
        sys.exit()


if __name__ == '__main__':

    My_Application = QApplication(sys.argv)
    MainWindow = MyNotification()
    MainWindow.show()
    MainWindow.terminal_ask()
    sys.exit(My_Application.exec_())

(https://stackoverflow.com/questions/47121960/python-project-text-to-screen-on-transparent-unobtrusive-overlay-box/47123665#47123665)

The line that does the trick seems to be:

self.setAttribute(QtCore.Qt.WA_TranslucentBackground)

The result from above looks like this:

well, pyqt dose support transparent background well, but we can't run webview 2 on it, we can use wpf, winform or winui3 to run a webview 2 through pythonnet, which the way pywebview is using.

[Timoses]

Yes, I apologize, I seem to have missed the point of this issue (and that transparency is generally already supported by pywebview.