當前位置:軟件學堂 > 資訊首頁 > 網絡編程 > 編程其他 > JS代碼實現圖片的水印效果

JS代碼實現圖片的水印效果

2012/11/7 20:12:03作者:佚名來源:網絡

移動端

【實例名稱】

JS代碼實現圖片的水印效果

【實例描述】

圖片的水印效果通過設置樣式的透明變實現。本例以具體實例介紹如何將圖片設置為水印樣式。

【實例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" > <head>     <title>無標題頁-學無憂(www.yzddtk.cn)</title> </head> <body>     <p><font face="Arial" color="#008080">     <div><p align="center">     <img  style="filter:alpha(opacity=10,finishOpacity=10,style=10, startX=10,startY=10,finishX=20,finishY=30,add=0,direction=45, strength=10)" src="logo1.gif" width="160" height="103"> </p>     </div>     </font>     <p align="center">這是圖片的水印效果</p></font> </body> </html>

 

【運行效果】

 圖片的水印效果運行效果

【難點剖析】

本例的重點是CSS的“ofilter”濾鏡效果:“alpha”用來設置透明層次,其使用語法如下所示:

各參數的說明如下:
·Opacity:起始值,取值為0~100,0為透明,100為原圖;
·FinishOpacity:目標值;
·Style:1、2或3;
·StartX:任意值;
·StartY:任意值。

【源碼下載】

為了JS代碼的準確性,請點擊:圖片的水印效果 進行本實例源碼下載 

標簽: 圖片    

欧美一级一极性活片免费观看,欧美一级艳片欧美精品,欧美一级性爱大片,欧美一级囗交视频 视频,欧美一级特黄录像视频