CSS3中的文字水印,是指將一些透明的文本放置在網(wǎng)頁上方,達(dá)到“水印”的效果。在一些需要保護(hù)版權(quán)的網(wǎng)站上,經(jīng)常會(huì)使用這種方式進(jìn)行版權(quán)保護(hù)。
實(shí)現(xiàn)CSS3的文字水印,需要使用到CSS3提供的兩個(gè)關(guān)鍵字:opacity和::before。
body { background-image:url(bg.jpg); } .watermark { position: relative; } .watermark::before { content: "?版權(quán)所有"; position: absolute; left: 0; top: 0; z-index: -1; opacity: 0.2; }
上面的代碼中,背景圖片是通過CSS屬性background-image設(shè)置的。注意,設(shè)置水印的元素需要設(shè)置position:relative屬性,否則水印位置可能會(huì)產(chǎn)生錯(cuò)誤。
::before是CSS3中的一種偽元素,通過設(shè)置content屬性,可以在元素的前面插入一些內(nèi)容。在這個(gè)例子中,我們設(shè)置content為“?版權(quán)所有”。通過設(shè)置position:absolute、left:0、top:0屬性,我們把水印放在了整個(gè)頁面的左上角。由于水印需要在正文之上,我們通過z-index: -1來實(shí)現(xiàn)。
最后,我們通過opacity屬性,將水印設(shè)置為半透明狀態(tài),使它更加自然地融入到頁面中。
總之,CSS3的文字水印可以為我們提供一種簡單有效的版權(quán)保護(hù)方式,可以用于各種類型的網(wǎng)站之中。希望以上的代碼和解釋能夠?qū)Υ蠹矣兴鶐椭?/p>