How to make page have a transparent background?

[Qbeta]

I want to make a  page with a transparent background so that I can get a window like this:


I tried this:
body{
    background-color: transparent;
}
it didn't work.I got a page with white background

Any way to get a transparent background?
Thanks in advance.

[Czarek Tomczak]

Hi Qbeta,

In CEF 1 it is possible to have transparent window. In CEF 3 it is only possible in

off-screen rendering mode (but there are no bindings for it yet in CEF Python).

In CEF 1 there is a method SetTransparentPainting() in WindowInfo class [1], my

guess is that it's for off-screen rendering only, but maybe it's also intended for

window rendering mode? No idea, need to test that.

I do not know of how to do this in CEF 1 in window rendering mode, I would have to

investigate this issue further.

Have a look at MSDN "Layered Windows" article [2] and "Chromium on Windows 7

+ Transparency" topic [3] on chromium-dev google group.

Cheers,

Czarek

[1] https://code.google.com/p/cefpython/wiki/WindowInfo

[2] http://msdn.microsoft.com/zh-cn/library/ms997507.aspx

[3] https://groups.google.com/a/chromium.org/d/topic/chromium-dev/juafwJvlBbY/discussion

[Qbeta]

thanks for your reply.

I read the CEF wiki and it seems transparent only work with off-screen rendering mode.
I found it's panda3d rendering the page in panda3d example
Does that mean the html page must be rendered by third-party engine in off-screen mode?

I tried to remove the panda3d in panda3d example then CEF(maybe skia) will rendering pages itself(I hope).
But I can't make it ,I just got a window with gray background and no content.(CEF 1)

I also read the "Layered Windows" article then got a transparent window but the CEF background is still white.
Could you just write a example to create a frameless window with a whole transparent html background?
Thanks a lot.

PS:I tried another CEF binding TideSDK and It support transparent when you set <transparent-background>true</transparent-background> in xml

[Czarek Tomczak]

Qbeta,

It is not required to use third party engine to use off-screen mode.

I've managed to get transparent window in windowed mode, here is the code:

       

windowInfo = cefpython.WindowInfo()
windowInfo.SetAsPopup(self.browser.GetWindowHandle(), "transparent")
windowInfo.SetTransparentPainting(True)
cefpython.CreateBrowserSync(windowInfo, browserSettings={},
        navigateUrl=GetApplicationPath("cefsimple.html"))

So it seems that WindowInfo.SetTransparentPainting() is intended for use with 

both off-screen mode and windowed mode.

Example of transparent popup was added to cefadvanced.py, see revision

00071cbb9dda [1].

Cheers,

Czarek

[1] https://code.google.com/p/cefpython/source/detail?r=00071cbb9dda54d0dc0a187f47f550c081f822d7

[Qbeta]

Thank you Czarek!
I got a transparent popup window successfully.

Then there still are some questions:
Can I get a main transparent window(not a popup window) ?Now I just create a main window and hide it so the popup window looks like a main window.
Any possibility to make the background totally invisible(not Aero glass) so I can create a shaped window?And is this transparent effect windows only?

Looking forward to your reply.

[Czarek Tomczak]

Qbeta,

 

Can I get a main transparent window(not a popup window) ?

Did you try calling SetTransparentPainting() on the main window?

Any possibility to make the background totally invisible(not Aero glass)

so I can create a shaped window?

I don't know how to do it, this would definitely require studying Layered Windows

in the win32 api, the link to the article on MSDN is a good start, as well is the

discussion on chromium-dev group, the link to which I posted.

I am not certain that this is possible in windowed mode, but even if it's not, then you

can always use off-screen rendering mode. You do not need to use third party engine

to use off-screen mode, you can do the painting using the off-screen buffer in

WM_PAINT message [1]. But I think that it should be doable in windowed mode.

And is this transparent effect windows only?

Are you asking about the Windows platform? CEF Python currently runs only on

Windows, but Linux and Mac ports should appear pretty soon.

Cheers,

Czarek

[1] http://msdn.microsoft.com/en-ca/library/windows/desktop/dd145213(v=vs.85).aspx

[Czarek Tomczak]

If you manage to get transparent window working the way you want,

please share the code with us. If this proves to be too hard then go

create an issue in the CEF Python Issue Tracker [1] to create an 

example of "real" transparent window, if this issue gets attention

there will be more chance for a solution.

Czarek

[1] https://code.google.com/p/cefpython/issues/list

[Czarek Tomczak]

Regarding the WM_PAINT message, what I meant is that you can

do the painting using win32 api, without requiring third party engine.

OT. I'm not sure why can't I edit posts in this topic, strange, it worked

a few days ago.

Czarek

[Qbeta]

Czarek,
I tried to call SetTransparentPainting() in main window and it didn't work.
I'm studying about Layered Windows and hope I can get a totally invisible window soon.(maybe a long time :)

To create a shaped window

• I think I should get a  totally transparent(invisible) layered window first(CEF embedded) as you say
  

• then I should set the CEF background to transparent too. off-screen mode or function setIsTransparent() in CEF may help,but I'm not sure how to call it in cefpython.

However layered window only works in windows platform.If I want to get a cross-platform transparent window there still are many work to do.

I will try to create a totally transparent layered window in cefpython first.I wll share the code if I succeed.

PS:The information about CEF and off-screen mode in it's wiki is too little.BTW I can't edit posts either.

[Qbeta]

I found layered window is not what I want.
when I got a transparent layered window,It makes everything transparent,not only the window background.


I guess what I want is a window without style WS_TILED.
Then I tried to set the window style to remove the border and titlebar.

hWnd = cefwindow.CreateWindow(
            title="CefSimple", className="cefsimple", width=800, height=600,
            icon="icon.ico", windowProc=wndproc)
    windowInfo = cefpython.WindowInfo()
    windowInfo.SetAsChild(hWnd)
    #windowInfo.SetTransparentPainting(True)
    #windowInfo.SetAsOffscreen(hWnd)
    browser = cefpython.CreateBrowserSync(

            windowInfo, browserSettings={},
           navigateUrl=GetApplicationPath("cefsimple.html"))

    wndStyle = win32gui.GetWindowLong(hWnd,win32con.GWL_STYLE)
    win32gui.SetWindowLong(hWnd, win32con.GWL_STYLE, wndStyle|(~win32con.WS_TILED))   #It didn't work!
    #win32gui.SetWindowLong(hWnd, win32con.GWL_STYLE, wndStyle|(~win32con.WS_MAXIMIZE)) #It didn't work!
   
    exStyle = win32gui.GetWindowLong(hWnd,win32con.GWL_EXSTYLE)
    win32gui.SetWindowLong(hWnd, win32con.GWL_EXSTYLE, exStyle|win32con.WS_EX_LAYERED)
    win32gui.SetLayeredWindowAttributes(hWnd, 0, 200, win32con.LWA_ALPHA) #Not what I want;It make everything transparent,not only the background.

    cefpython.MessageLoop()
    cefpython.Shutdown()

It didn't not work correctly.Did I do something wrong?
Pls see the attached.

[Qbeta]

I have create an issue in CEFpython.

[Czarek Tomczak]

Qbeta,

To remove a style from a window use a "bitwise and" operator:

wndStyle & ~(win32con.WS_TILED)

Also you need to call SetWindowPos() with the SWP_FRAMECHANGED flag

to see the changes applied, see the documentation for SetWindowPos() [1]

on MSDN website, read the "Remarks" section.

Cheers,

Czarek

[1] http://msdn.microsoft.com/en-ca/library/windows/desktop/ms633591(v=vs.85).aspx

[Qbeta]

win32gui.SetWindowLong(hWnd, win32con.GWL_STYLE, wndStyle &~ (win32con.WS_TILED)) )
win32gui.SetWindowPos(hWnd,win32con.HWND_TOP,100,100,800,600,win32con.SWP_FRAMECHANGED)

It didn't work :(

[Czarek Tomczak]

Try to remove style WS_TILEDWINDOW. Try also a combination with GWL_EXSTYLE.

See function ToggleFullscreen_Windows() [1] that makes calls to SetWindowLong()

and SetWindowPos().

Alternatively you can just edit cefwindow.py and set the appropriate styles when 

creating the window through a call to win32gui.CreateWindow() [2].

Cheers,

Czarek

[1] https://code.google.com/p/cefpython/source/browse/cefpython/browser.pyx?r=c6757ab7ac26#403

[2] https://code.google.com/p/cefpython/source/browse/cefpython/cef1/windows/binaries/cefwindow.py?r=c6757ab7ac26#120

[Qbeta]

Great!
WS_TILEDWINDOW work correctly.
Thank you Czarek!

[ric...@gmail.com]

Did you end up with it completely transparent? If so, how exactly?
The most I can see is the semi-transparent pop-up. Fully transparent would be nice, to appear like an overlay.

[ric...@gmail.com]

I found a way to make the whole window transparent, and not just the background. It would be nice to do just the background.
to do so, in cefwindow, around line 120:
windowID = win32gui.CreateWindow(....)

add this add:
win32gui.SetWindowLong(windowID, win32con.GWL_EXSTYLE, win32con.WS_EX_LAYERED)
win32gui.SetLayeredWindowAttributes(windowID, 0, 128, win32con.LWA_ALPHA)

Another approach I heard of is sort of a trick.
Take a screenshot of the desktop and use that as your window background, adjusting for your window-size and position of course.

[ric...@gmail.com]

I'm getting real close with "LWA_COLORKEY", but missing something. The background becomes transparent, but the window frame becomes unclickable.

same as before, after line 120 in cefwindow.py:

win32gui.SetWindowLong(windowID, win32con.GWL_EXSTYLE, win32con.WS_EX_LAYERED)
win32gui.SetLayeredWindowAttributes(windowID, win32api.RGB(255,255,255), 0, win32con.LWA_COLORKEY)

[ric...@gmail.com]

After some more tinkering, not only did I get what I need but other possibilities too, and I'll share here.
--------------------------------

== Transparent Everything ==
We set an opacity level and the whole window follows that.

- after line 120 in cefwindow.py after: windowID = win32gui.CreateWindow(...)

win32gui.SetWindowLong(windowID, win32con.GWL_EXSTYLE, win32con.WS_EX_LAYERED)
win32gui.SetLayeredWindowAttributes(windowID, 0, 128, win32con.LWA_ALPHA)

--------------------------------

== Transparent Background ==
This works by making a certain color into a color key, and that color becomes transparent and click through. In this example, white. After setting the Alpha, we need to run SetWindowPos to get the title bar to work, although only the right side can move the window.

- after line 120 in cefwindow.py after: windowID = win32gui.CreateWindow(...)

win32gui.SetWindowLong(windowID, win32con.GWL_EXSTYLE, win32con.WS_EX_LAYERED)
win32gui.SetLayeredWindowAttributes(windowID, win32api.RGB(255,255,255), 0, win32con.LWA_COLORKEY)

(left, top, right, bottom) = (200, 200, 1400, 900) # your window size
win32gui.SetWindowPos(windowID, None, left, top, right-left, bottom-top, win32con.SWP_NOMOVE | win32con.SWP_NOACTIVATE | win32con.SWP_FRAMECHANGED)

--------------------------------

== Transparent Background, no borders or captions ==
Here we need to modify win32gui.CreateWindow() to be a WS_POPUP, and for the transparency we use the white color key.

- around line 120 in cefwindow.py which starts: windowID = win32gui.CreateWindow(...)
- replace "WS_OVERLAPPEDWINDOW | win32con.WS_CLIPCHILDREN" with win32con.WS_POPUP

- After line 120: