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,我们可以创造出各种美观实用的水印效果。