设计晶莹的水印
水印效果图如下：
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图像水印</title>
<style type="text/css">
body{
background:green;
}
.watermark {/*包含块样式*/
position:relative;/*相对定位*/
float:left;/*向左浮动，这样包含元素就能够自动包裹包含的照片*/
display:inline;/*行内显示，这样就避免包含元素随处浮动*/
}
.img{
background:white;/*白色背景*/
padding:5px;5px;9px;5px;/*增加内边距*/
background:white url(images/bottom.gif) repeat-x bottom left;/*底部阴影*/
border-left:2px solid #dcd7c8;/*左侧阴影*/
border-right:2px solid #dcd7c8;/*右侧阴影*/
}
.img1{
filter:alpha(opacity=60);/*兼容IE浏览器*/
-moz-opacity:0.6;/*兼容Moz和FF浏览器*/
opacity:0.6;/*支持CSS3的浏览器（FF1.5也支持）*/
position:absolute;/*绝对定位*/
right:20px;/*定位到照片的右侧*/
bottom:20px;/*定位到照片底部*/
}
</style>
</head>
<body>
<div class="watermark">
<img src="images/1.jpg" class="img" width="440"/>
<img src="images/logo.png" class="img1" width="200"/>
</div>
</body>
</html>
其中1.jpg图是:
logo.png
bottom.gif
