测试
2024/9/13 11:15:30 asp 0
在 Bootstrap 5.3 中加入背景水印图可以通过以下步骤实现： 一、准备水印图片 首先，准备一张合适的水印图片。确保图片的大小和透明度适合作为背景水印。如果需要，可以使用图像编辑工具对图片进行调整。
<body> <div class="watermarked-container"> <!-- 这里是你的页面内容 --> </div> </body>
.watermarked-container {
position: relative;
background-image: url('path/to/your/watermark-image.png');
background-repeat: repeat;
background-size: contain;
opacity: 0.2; /* 调整水印的不透明度 */
}<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="gray" opacity="0.2">水印内容</text> </svg>
.watermarked-container {
position: relative;
/* 确保容器大小与内容匹配 */
display: inline-block;
}
.watermarked-container::before {
content: "水印内容";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* 设置水印的不透明度 */
opacity: 0.2;
/* 设置背景颜色为半透明的白色 */
background-color: rgba(255, 255, 255, 0.5);
/* 设置水印的字体大小和颜色 */
font-size: 20px;
color: gray;
/* 设置水印的重复方式 */
background-repeat: repeat;
pointer-events: none;
}