Puppeteer saved PNG is NOT transparent

Question

I am using Puppeteer to screen capture an HTML element with ID name.

The HTML element is with border-radius: 50px and I set Puppeteer with omitBackground: true.

The Saved PNG result gave me is a WHITE background, looks like it captured the BODY WHITE background.

puppeteer: v1.13.0

Any ideas?

Answer 1

If the page has a background color you want to remove that, and then use the omitBackground: true option of page.screenshot:

await page.evaluate(() => document.body.style.background = 'transparent');
await page.screenshot({
    path: 'example.png',
    omitBackground: true,
});

Answer 2

What omitBackground: true does is changing the default background color to transparent. According to the documentation:

Emulation.setDefaultBackgroundColorOverride Sets or clears an override of the default background color of the frame. This override is used if the content does not specify one.

If the body has a background-color: white;, setDefaultBackgroundColorOverride won't change that.