用 CSS 给图片添加水印效果

发布于：电脑网络 1,886 次践踏

在 WordPress 发布日志中，经常会发布一些独一无二的原创图片或者照片，当然不希望这些图片被恶意利用，你可能会用 .htaccess 增加了图片防盗链功能，但是遇到人肉采集，这些图片就无所遁形了。所以最好的方法就是给图片加水印，如果图片少那用 PS 就可以轻松搞定，如果图片量大，需要经常使用水印效果，那对于像我这样 PS 技术烂到不行的朋友就要头疼了。

幸好，Wordpress 有强大的插件支持，已经有自动添加水印的插件诞生了，比如：wp-watermark、Super Image Plugin。当然，我要介绍的更定不会是用插件实现图片水印啦，而是用 CSS 填加图片水印效果，同样可以一劳永逸。

先看效果图：

很帅吧，其中的“Life Studio”的 Logo 就是用 CSS 添加的水印效果。再看代码如下：

<div class="watermark">
    <img class="logo" src="http://picture.jpg" />
</div>

CSS 部分：

.watermark {
    background:transparent url(http://watermark.png) no-repeat;
}
img.logo {
    filter:alpha(opacity=75);
    opacity:.75;
}

用 CSS 实现的图片水印，有其优势，当然也有其缺点。最大的优点就在于，节省了空间，不必生成一张新加了水印的图片保存于空间，而且在 IE 或者 Firefox 等各浏览器下都可以完美实现图片水印效果。而最大的缺点就是，依然防不住人肉，因为这个水印图片只是作为背景图片隐藏在图片背后。