用 CSS 给图片添加水印效果

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

  幸好,Wordpress 有强大的插件支持,已经有自动添加水印的插件诞生了,比如:wp-watermarkSuper 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 等各浏览器下都可以完美实现图片水印效果。而最大的缺点就是,依然防不住人肉,因为这个水印图片只是作为背景图片隐藏在图片背后。

本文已盖 137 层楼

  1. 回复 蛋卷 说:

    这个可以收藏

  2. 回复 猪八戒 说:

    原来是假水印,哈哈,我现在在使用windowslivewriter也可以加水印,但不知道是真水印还是假水印,有时间去试一下。

  3. 回复 疾风 说:

    这个水印是欺骗自己啊 呵呵

  4. 回复 自由人 说:

    刚才在altavista搜了下老万的收录 4000多条啊。。。
    这个水印防不住啊,只是看上去有水印哈

  5. 回复 itlobo 说:

    你把300给破了

  6. 回复 菲萨塔 说:

    不错不错!!!!我也来学学我也来试试!!!!

  7. 回复 回憶 说:

    不錯學習了! :mrgreen:

  8. 回复 SATURN 说:

    哈哈,这个要好好学习一下

  9. 空城计......依然无法防止人肉啊。

  10. 这个好,我觉得壁纸网站应该应用这个效果。既申明版权又不会破坏原有图片。

  11. 回复 happyet 说:

    真神奇 ie下居然也有效果 :eek:

  12. 回复 619 说:

    又学习了一招!谢谢分享,哈哈! :grin:

  13. 回复 LAONB 说:

    这方法不错,不过对我不适用,我每个日志右上角都加了LOGO,总不能把他们弄花吧,只能每次勤快点用PS了。 :?:

  14. 回复 vaman 说:

    我想做个漂亮的水印图 :sad:

  15. 我还是使用.htaccess防盗链

  16. 但是人家盗链 貌似还是原图唉~

  17. 我的博客图片的比较少,暂时还是用不到水印

  18. 回复 tastypear 说:

    漂亮的说,不过在自己Blog加水印,被人拿去水印又没了,感觉和水印的初衷背道而驰了...虽然如此还是很赞!

  19. 回复 虫儿 说:

    这个不错,我去试试。

  20. 回复 FORECE 说:

    效果不错,不过在READER里看不出来,哈哈

  21. 回复 zwwooooo 说:

    我还是比较少加水印,也老是忘记,反正记得就用fw加一个

  22. 在FEED中没有水印~ :mrgreen:

  23. 不错的想法,试过了,直接copy文章是会有水印D :eek:

  24. 回复 先看看 说:

    我准备全部打上水印,发现防盗链后,还有N多人肉采集的,没有办法了

  25. 回复 shuil 说:

    呵呵,创意不错。让人望而却步。

  26. 回复 mimzyx 说:

    这也只是表面 :lol:

  27. 回复 蛋王 说:

    用来唬人不错的,真的。不过要是人家是rss订阅的,你就露馅了。。。哈哈

  28. 回复 shamas 说:

    很强大,但写博客的我都不要版权了,越关心越伤心

  29. 回复 smigoo 说:

    额 还是不可以。。。

  30. 回复 smigoo 说:

    这个方法不错 可以防止盗图

  31. 回复 365hope 说:

    如果有需要的话,我一般都会动用 PS 的,偶尔为之~~

  32. 回复 kangzj 说:

    可以保护图片,不过失去了原来的功能

  33. 回复 keon 说:

    简单而实用~~ :roll:

  34. 回复 胡一刀 说:

    ╮( ̄▽ ̄")╭ CSS真是博大精深那,这几个定义我又没见过....

  35. 回复 MuMu'S 说:

    哎呀,我的那些图片谁爱用爱用去。
    我也想要水印,可是想象还是很麻烦。

  36. 回复 志言堂 说:

    这个水印太大了吧

  37. 回复 keelii 说:

    嗯。又见滤镜,不过在IE中还是可以搞搞的。半透明效果其它浏览器还是支持的。

  38. 戈兄,越来越羡慕你呢耶!怎么办啊~~~~

  39. 回复 whisperer 说:

    效果不错 不用每张都要手动加水印了

    不过这样貌似还无法防止盗用吧 因为在站外引用的时候没有你的css样式,是看不到水印的

  40. 回复 小明猪 说:

    难道在这里自曝过了? :eek:

  41. 回复 Lc. 说:

    不错的CSS效果阿。我有空试用一下插件。 :mrgreen:

  42. 回复 短歌行 说:

    万兄还真是一位零插件的狂人呀,强!!

  43. 回复 林木木 说:

    哈哈,换图拉~

  44. 回复 超人 说:

    这是你小时候把~

  45. 回复 oink 说:

    阅读器里看不到。这个不好用内联了吧。

  46. 回复 A.shun 说:

    好处谁方便,坏处是保存到本地就没有水印了

  47. 回复 Louis Han 说:

    同志们有人会PS的赶紧上场了

  48. 回复 neoear 说:

    照片的男孩是谁呢?是你吗? :smile:

  49. 回复 小y 说:

    呜呜呜,没沙发了,就板凳吧。。

  50. 回复 一米 说:

    很不幸,在rss里面没有效果。

Leave a comment

您已输入0

三言两语

我的生活心情语录

工作手札

路漫漫其修远兮

精品推荐

好东西要分享

嘻哈娱乐

八卦趣事一笑而过

电脑网络

全新技术尽搜罗

转来载去

文人墨客美文赏析