使用css给图片加水印

时间：2015-04-03 10:21:51 　来源：免费模板网　作者：风雪　阅读次数　tagscss特效

有时候给自己网站里面的图片加上logo，在css里面怎么实现呢
这幅效果图用文字闪烁和mask滤镜效果综合来完成......

race字样本是一幅图，对它使用了mask滤镜，即是把图案区域镂空来显示该图下面一层的文字

<HTML>
<HEAD>
<TITLE>CSS水印图片</TITLE>
<STYLE> 
.30PT{font-size:30pt;color:#0099CC}
</STYLE>
<script> 
var colors=new Array("red", "#2994fd", "#11fff2", "#c0b189", "#f2fd89", "magenta", "white");
function rainbow() 
{
	var el = document.all.racerX;
	if (null==el.color) el.color = 0; 
	if (++el.color==colors.length) el.color=0;
	el.style.color = colors[el.color];
	window.tm=setTimeout('rainbow()',750);        
}        
</script>
</HEAD>
<BODY onload="rainbow()">
<DIV style="position:absolute; top:0, left:0; width:400; height:300; z-index:0">
<IMG src="/jscss/demoimg/wall5.jpg" width=400 height=300></DIV>
<DIV style="position:absolute; top:200; left:190; width:200; height:100; text-align:center; z-index:2">
<IMG id=logo src="/jscss/demoimg/201102/race.gif" style="filter:mask(color=red);"></DIV>
<DIV style="position: absolute;color: white; top: 200; left:190; width:200; height:100; z-index:1">
<SPAN id=racerX style="font-size:8pt; line-height:8px; font-family=Arial; font-weight:bold; z-index:1"> 
<PRE>racerXracerXracerXracerXracer
racerXracerXracerXracerXracer
racerXracerXracerXracerXracer
racerXracerXracerXracerXracer
racerXracerXracerXracerXracer
racerXracerXracerXracerXracer
racerXracerXracerXracerXracer
racerXracerXracerXracerXracer
racerXracerXracerXracerXracer
racerXracerXracerXracerXracer
racerXracerXracerXracerXracer
racerXracerXracerXracerXracer
</PRE></SPAN></DIV>
<div style="position:absolute; top:320; left:10;z-index:10">
<font class=30pt>
这幅效果图用文字闪烁和mask滤镜效果综合来完成......<br>
race字样本是一幅图，对它使用了mask滤镜，即是把图案区域镂空来显示该图下面一层的文字....
</font>
</div>
</BODY>
</HTML>

上篇：css定位之Position的用法

下篇：css滤镜效果代码

本文地址：https://www.freemoban.com/bjrm/2015/0403/1197.html

猜你喜欢