如何制作透明的水印LOGO

1、打开Adobe Photoshop CC。

2、选择“文件”-“新建”（或者是快捷键Ctrl+N），新建一个画布，新建的画布不需要太大，示例图是200X200的画布。

3、给画布填充一个黑色的颜色（利用快键键Alt+Delete/Backspace可以快速填充前景色，利用快键键Ctrl+Delete/Backspace可以快速填充背景色）。填充黑色是为了在制作的过程中更好地观察。

4、填充好颜色以后，选择文字工具，并输入水印文字，把文字的填充改成“0”，不透明度改成“10%”。

5、选择“图层”下面的“添加图层样式”，给文字图层添加一个描边，描边的结构可以根据喜好设置，但描边大小不要太大，不然就达不到透明的效果，颜色选择白色。

6、完成后保存成PNG透明图片格式，一个透明的水印LOGO就做好了。

IE6不支持PNG格式透明，需要JS滤镜支持，代码可以参考下面的

实现PNG图片在IE6下的透明效果

解决这个问题大致有以下方法(其原理都是通过AlphaImageLoader滤镜来解决)。

方法一:

<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/header.png)width:200pxheight:50px"></div>

点评:这种方法虽然较好的解决了IE 5+的浏览器，但却得本来能正常显示透明PNG图片的FireFox无法正常显示!

方法二:

<script type="text/javascript">

// PNG纠正控件 1.0 For IE 5.5或更高.

// 作者:舜子

function isIE(){

if (navigator.appName!="Microsoft Internet Explorer") {return false}

return true

}

function correctPNG()

{

for(var i=0i<document.images.lengthi++)

{

var img = document.images

var LW=img.width

var LH=img.height

var imgName = img.src.toUpperCase()

if (imgName.substring(imgName.length-3, imgName.length) == "PNG")

{

img.style.filter+="progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+img.src+", sizingmethod=scale)"

img.src="/images/transparent.gif"//transparent.gif为1px*1px的透明gif图片

img.width=LW

img.height=LH

}

}

}

if (isIE()) {window.attachEvent("onload", correctPNG)}

</script>

点评:这种方法确实能解决这个问题，但是如果不是在本地调试，通常需要一段时间的转换!

方法三:

<div id="header"><!--此DIV为需要插入PNG图片的区域-->

<script type="text/javascript">

if (navigator.appName!="Microsoft Internet Explorer") {

document.write("<img src=\"/images/header.png\" width=\"200\" height=\"50\" alt=\"站长吧 Master8.NET\" />")

} else {

document.write("<img style=\"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/header.png, sizingmethod=scale)width:200pxheight:50px\" src=\"{$rootpath}/images/transparent.gif\" width=\"200\" height=\"50\" alt=\"站长吧 Master8.NET\" />")

}

</script>

<div>

点评:事实上网页中绝对需要使用透明PNG图片的地方并不多，所以如果你的网页中仅仅是一两处使用透明PNG图片，建议用这种方法。

如果浏览者禁用了js,方法二和三当然失去了作用。针对方法三，可以做一些完善:

<div id="header">

<div id="Index_header">图片简要说明,正常浏览本站请不要禁用js</div>

<div>

<script type="text/javascript">

if (navigator.appName!="Microsoft Internet Explorer") {

document.getElementById('logo').innerHTML="<img src=\"/images/header.png\" width=\"200\" height=\"50\" alt=\"站长吧 Master8.NET\" />"

} else {

document.getElementById('logo').innerHTML="<img style=\"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/header.png, sizingmethod=scale)width:200pxheight:50px\" src=\"/images/transparent.gif\" width=\"200\" height=\"50\" alt=\"站长吧 Master8.NET\" />"

}

</script>

---