[分享]css做斜向循环水印

CSS可以通过一些技巧实现很多炫酷的效果，比如斜向循环水印，下面我们就来看看该如何通过CSS实现。/ 定义水印样式 / .watermark { width: 300px; / 水印宽度 / heig...

CSS可以通过一些技巧实现很多炫酷的效果，比如斜向循环水印，下面我们就来看看该如何通过CSS实现。

/* 定义水印样式 */
.watermark {
    width: 300px; /* 水印宽度 */
    height: 300px; /* 水印高度 */
    position: relative; /* 相对定位 */
    overflow: hidden; /* 隐藏水印内容 */
}

/* 定义水印内容样式 */
.watermark:before {
    content: ""; /* 没有实际内容 */
    position: absolute; /* 绝对定位 */
    top: -50%; /* 位置偏移 */
    left: -50%; /* 位置偏移 */
    width: 200%; /* 水印宽度比例 */
    height: 200%; /* 水印高度比例 */
    background: linear-gradient(to bottom right, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0) 70%); /* 渐变效果 */
    transform: rotate(-45deg); /* 旋转水印 */
    z-index: -1; /* 放置在底层 */
} 

上面的样式代码中，我们定义一个包含背景水印的容器，然后使用:before伪元素设置水印内容，并旋转45度。我们使用线性渐变来实现从不透明到透明的效果，并设置z-index属性为-1，将背景放置在容器底部。

在HTML页面中，只需要添加一个class为watermark的元素即可：

<div class="watermark">
    <p>这是一段文本。</p>
</div> 

最终效果如下图所示：

通过CSS实现斜向循环水印非常简单。在实际应用中，可以根据需求灵活调整水印的样式和位置。