css水印在哪里 |css完全自学手册百度云

首先，CSS水印可以放在页面的背景上。在页面内任何一部分显示都没有问题，而且会和背景图片形成很好的融合效果。下面是一段背景水印的代码：

body { 
background-image:url('watermark.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

上面的代码片段中，大家通过background-image引入对应的水印图片，然后通过background-repeat属性控制不进行图像平铺。background-attachment属性指定了背景图片不会随着滚动而滚动，background-position属性指定了图片居中。

另外，在一个文本块中显示CSS水印也是非常简单的。可以给相应的文本块配上一个透明的背景色和类似于半透明图形的背景图，并设置一些透明度层效果，如下所示：

.watermark-text {
color: #B8B8B8;
font-family: "微软雅黑",Arial,sans-serif;
font-size: 16px;
position: relative;
}
.watermark-text::before {
content: "";
background-image: url('watermark.png');
opacity: 0.5;
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
z-index: -1;
}

上面的代码中，大家在类名水印文字的::before伪类中设置一张背景图片为CSS水印，即background-image属性，然后通过opacity属性控制透明度，同时进行相应的尺寸和位置调整。

总之，CSS水印可以出现在任何地方，无论是页面背景，还是文本块，只要把握好相应的CSS属性，就能够有效的美化页面，同时也让页面呈现更好的表现效果。