如何在WebView2控件上方添加本地图片？

我使用WebView2控件替代常规WebBrowser控件，因为WebView2可借助Microsoft Edge浏览器内核访问网站。

基础使用示例代码 #

public Form1()
{
    InitializeComponent();

    webView21.Source = new Uri("https://microsoft.com");
}

运行效果 #

我希望从本地硬盘添加自定义图片，使其显示在WebView2控件上方，实现类似PictureBox控件上叠加图片的效果。不希望通过导航到图片URI的方式加载，而是直接将图片叠加在控件上。

预期效果示例 #

针对WinForms场景，提供两种无需网页导航的叠加方案：

方案1：使用PictureBox控件快速实现 #

这是最直观的方式，步骤如下：

1. 在设计器中将PictureBox拖放到窗体上，位置覆盖WebView2的目标区域
2. 加载本地图片并调整控件属性：

// 加载本地图片
pictureBox1.Image = Image.FromFile(@"C:\本地图片路径\weather-radar.png");
// 开启透明背景（适配带Alpha通道的PNG）
pictureBox1.BackColor = Color.Transparent;
// 确保PictureBox在WebView2上方显示
pictureBox1.BringToFront();
// 可选：调整大小模式
pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;

3. 通过Location和Size属性精确控制图片的位置与尺寸。

方案2：自定义绘制（灵活控制场景） #

如果需要动态调整、叠加多张图片等复杂需求，可通过窗体或自定义控件的Paint事件实现：

private void Form1_Paint(object sender, PaintEventArgs e)
{
    using (Image overlayImage = Image.FromFile(@"C:\本地图片路径\weather-radar.png"))
    {
        // 定义绘制区域：以WebView2左上角为基准，偏移20px，绘制100x100的图片
        Rectangle drawArea = new Rectangle(
            webView21.Location.X + 20, 
            webView21.Location.Y + 20, 
            100, 
            100
        );
        e.Graphics.DrawImage(overlayImage, drawArea);
    }
}

• 若WebView2页面刷新导致图片消失，可在NavigationCompleted事件中触发重绘：

private void webView21_NavigationCompleted(object sender, CoreWebView2NavigationCompletedEventArgs e)
{
    this.Invalidate();
}

注意事项 #

• 控件Z顺序：通过BringToFront()确保叠加层在WebView2上方
• 透明支持：PictureBox需设置BackColor = Color.Transparent，自定义绘制自动支持图片透明通道
• 路径处理：建议使用相对路径或嵌入资源，避免绝对路径引发的文件找不到问题

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