Bootstrap Blazor框架添加全局页面水印
网页水印一般有4钟实现方式：
1. CSS 水印，通过 CSS 为网页元素添加水印，如背景图片或文字，操作简单，但可能受限于浏览器兼容性。
2. HTML 水印，在 HTML 代码中插入标签和元素，如 <div>，设置水印位置与样式。
3. SVG 水印，使用 SVG 创建高质量的矢量图像水印，实现复杂效果。
4. JavaScript 水印，动态生成网页水印，支持高级功能如动态和交互式水印。
本文章通过SVG来实现页面全局水印， 减少JS，增加扩展性，如登录或单点登录后可将水印文字替换为登录的用户名等。
首先写一个简单的水印组件Watermark，代码如下：
Watermark.razor
<div class="watermark" id="watermark" style="content: '';position: fixed;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;background-image: @BackgroundImageUrl;background-repeat: repeat;opacity: 1;z-index: 9999;background-size: auto;"></div>
Watermark.razor.cs
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
using System.Diagnostics.CodeAnalysis;namespace BlazorServerApp.Components.Commons
{public partial class Watermark{[Inject][NotNull]private IJSRuntime? JSRuntime { get; set; }[NotNull]private static IJSObjectReference JsModule { get; set; }private static string BackgroundImageUrl { get; set; }protected override async Task OnAfterRenderAsync(bool firstRender){try{JsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./Components/Commons/Watermark.razor.js");if (firstRender){await GetWatermarkText();}await base.OnAfterRenderAsync(firstRender);}catch (Exception ex){}}public static async Task GetWatermarkText(){BackgroundImageUrl = $"url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 300 300'><text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' font-size='30' fill='rgba(0,0,0,0.2)' transform='rotate(-45 150 150)'>我是水印</text></svg>\")";await JsModule.InvokeVoidAsync("setBackgroundImage", "watermark", BackgroundImageUrl);}}
}
如果有登录页面，且登录页面不需显示水印，则可在登陆方法执行成功后，或在主界面Shared\MainLayout.razor渲染之前的声明周期函数中手动调用静态方法GetWatermarkText。
Watermark.razor.js
export function setBackgroundImage(elementId, imageUrl) {document.getElementById(elementId).style.backgroundImage = imageUrl;
};水印组件写好后，找到Pages路径下的_Host.cshtml文件，引入Watermark水印组件所在的命名空间，
@using BlazorServerApp.Components.Commons在
<component type="typeof(App)" render-mode="ServerPrerendered" />这一行代码下面添加如下代码：
<component type="typeof(Watermark)" render-mode="ServerPrerendered" />注意render-mode属性需要填“ServerPrerendered”，确保能触发“OnAfterRenderAsync”生命周期函数。
通过全局添加水印组件，实现不管切换到哪个菜单、页面或弹窗，水印始终固定，效果图如下：
