css 如何设置水印效果

什么是水印效果？简单来说，水印是在网页上（或者图片上）添加一些半透明的文字或图案，以防止由于侵权等情况导致的非授权传播。水印的设置对于一些有版权保护的网站或平台非常重要。

那么如何通过CSS设置水印效果呢？以下是一个简单的示例代码：

/*设置水印文字的样式*/.watermark {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../images/transparent.gif);
}
.watermark::before {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 24px;
    color: rgba(0,0,0,.15);
    content: "这里是水印文字";
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    transform: translateY(-50%);
    pointer-events: none;
}
    

如上所示，我们先用CSS样式设置一个“容器DIV”，并将其背景图片设置为一个透明的GIF图片，这样可以让文字不被背景颜色覆盖（可以用其他透明的图片代替）。接下来，我们使用伪类“::before”来为这个容器DIV添加水印文字，并设置其样式。

需要注意的是，我们还在样式中添加了“pointer-events: none; ”这个属性。这是因为水印文字一般都是半透明的，如果不禁用其指针事件，那么用户可能会在点击水印文字的时候，与后面的元素产生无意义的干扰。

以上仅是CSS中设置水印效果的一个简单示例，在实际应用中，也可以通过JavaScript等技术来完成水印效果的设置。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！