I've got a cef window and I'm doing off-screen rendering.
I'd like parts of the window to be completely transparent -- to the desktop/background.
As long as the objects on the page are square/rectangular, the transparency works as expected.
However, with any rounded edges, there is a "halo" consisting of whatever color I've designated as the transparency color.
I have attached a couple of screen shots:
Halo:
No-Halo:
The html for this display is:
(Note: the transparency color is: #ff0)
- Code: Select all
<html>
<body>
<div>
<div style="float:left;width:40%;padding:10px;background:#ff0;margin:5px">
<p>Transparent Div</p>
<div style="width:100px;height:100px;background:#f00;border-radius:50px;border: 1px solid #f00;margin:5px;"></div>
<div style="width:100px;height:100px;background:#f00;border: 1px solid #f00;margin:5px;"></div>
</div>
<div style="background:#fff;float:right;width:50%;padding:10px;margin:5px;">
<p>Opaque Div</p>
<div style="width:100px;height:100px;border-radius:50px;background:#f00;border:1px solid #f00;margin:5px;"></div>
<div style="width:100px;height:100px;background:#f00;border: 1px solid #f00;margin:5px;"></div>
</div>
</div>
</body>
</html>
Is this something I'm doing wrong?
How do I ensure the "halo" artifact does not appear on non-rectangular elements when drawn on a transparent background?
Note: the same issue occurs with <img> images.
Thanks,
-- Mark