css 水印 平铺 |css最多显示1行文字

.watermark {
position: absolute; /* 水印使用绝对定位 */
z-index: -1; /* 将水印的z-index设为-1，放置在内容下方 */
width: 100%; /* 让水印宽度自适应 */
height: 100%; /* 让水印高度自适应 */
pointer-events: none; /* 让水印不拦截用户事件 */
background-image: url('watermark.png'); /* 指定水印图片 */
background-position: 0 0; /* 将背景图片位置置为左上角 */
background-repeat: repeat; /* 重复平铺水印图片 */
opacity: 0.3; /* 调整透明度，减弱干扰 */
}

在上述代码中，创建一个类名为”watermark”的样式，使用绝对定位让水印覆盖在内容上方，将z-index设为-1则可以让水印位于内容背后。指定水印图片后使用background-position将背景图片位置置为左上角，这样可以避免在滚动页面时出现变形。使用background-repeat属性指定平铺模式，这里使用了repeat模式，它会在水平方向和垂直方向上平铺水印图片。最后使用opacity调整透明度，以减弱水印的干扰。

通过CSS实现水印的好处在于它可以自适应浏览器窗口大小和内容的变化，同时不会占用过多的资源和页面加载速度。如果需要自定义水印样式，可以通过修改background-image、opacity和在图片上叠加其他元素等方式实现。