设计晶莹的水印

最新推荐文章于 2024-04-30 22:06:17 发布

dczjn9698

最新推荐文章于 2024-04-30 22:06:17 发布

阅读量58

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/Mygirl/archive/2012/04/25/2470363.html

版权

水印效果图如下：

代码如下：

<!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

转载于:https://www.cnblogs.com/Mygirl/archive/2012/04/25/2470363.html

dczjn9698

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
设计晶莹的水印

水印效果图如下：代码如下：<!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"...
复制链接

扫一扫