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,我們可以創造出各種美觀實用的水印效果。