淘先锋技术网

首页 1 2 3 4 5 6 7

CSS作为一种用于网页设计的语言,拥有许多强大的功能,其中之一就是能够给网页添加水印。水印是浮在网页上的一种图形或文字,常常用于强调版权、品牌等信息。

在CSS中,使用background属性可以为网页添加水印。其中,可以使用url()函数指定图片链接,也可以使用linear-gradient()函数或radial-gradient()函数创建渐变色背景。除此之外,还可以使用repeat、repeat-x、repeat-y、no-repeat等值设定背景是否平铺。

/* 给网页添加图片水印 */
body {
background: url('watermark.png') no-repeat center center fixed;
background-size: 50%;
}
/* 给网页添加文本水印 */
body::after {
content: "© 2021 My Website";
position: fixed;
bottom: 10px;
right: 10px;
font-size: 20px;
opacity: 0.5;
}

上述代码中,第一个样式给网页添加了一个名为watermark.png的图片水印,将其居中不重复地显示在网页背景上,并将其大小设定为50%。而第二个样式则为网页添加了一个文本水印,使用content属性插入文本,使用fixed属性将其固定于网页底部右侧,并使用opacity属性设定其透明度为50%。

总之,使用CSS添加水印是一种简单而有效的提升网页质量和保护版权的方式。通过合理地运用CSS,我们可以创造出各种美观实用的水印效果。