新品圖片是重要的商品宣傳材料。然而,經常有人盜用他人的圖片,甚至進行商業行為。為保護自己的圖片不被盜用,我們需要在圖片上加上水印。今天,我將為大家介紹一種簡單易用的CSS水印方法。
/* 定義圖片水印CSS樣式 */ .watermark { position: absolute; z-index: 999; pointer-events: none; font-family: Arial, sans-serif; font-size: 20px; color: rgba(255,255,255,.5); text-align: center; width: 100%; } /* 定義水印位置和樣式 */ .watermark::before { content: '樣例水印'; top: 50%; left: 50%; transform: translate(-50%, -50%); }
在上面的代碼中,我們使用了一個PSUEDO元素,通過content屬性定義了水印內容。此外,我們還通過絕對定位的方式,將水印的位置定在了圖片中心。這種水印方式不僅方便易用,而且可以根據需要自定義水印樣式。
總之,使用CSS圖片水印是保護圖片版權的重要方法。只要我們掌握了基本CSS技巧,就能輕松實現高質量的圖片水印效果。
上一篇新建css文件設置高和寬
下一篇方向鍵css