页面用力 o>﹏<o 加载中...
上一篇
下一篇
CSS之图片重叠，可做文章水印用
作者:夜空寂灭 日期:2010-05-11
今天在做货物展示时，觉得货物状态如果用一个水印图片标识的话，就能够更醒目，更cool一点了——就像那些论坛加精贴那样，一个“精”字水印盖在那里。
于是就找了一下这方面资料，但效果都不太理想，好不容易，终于给我找到了一个实现的方法了：
引用内容http://www.61dh.com/blog/2008/10/css.html
原理：
把原图放在一个<div>里，然后在这个<div>里插入一个空<span>标签，然后在css样式里，给这个span加上背景图，这个背景图就是指原图的装饰。
CSS样式如下：注意在div(本例中class命名为grd )的样式里position被设成relative(相对); 而在span里position被设成absolute(绝对)；这个非常重要！而其它样式比如：width(宽度)，top(上间距) 都可以根据实际情况来定。
有了上面的CSS，HTML可以这样写：
演示：图片重叠
原理：
把原图放在一个<div>里，然后在这个<div>里插入一个空<span>标签，然后在css样式里，给这个span加上背景图，这个背景图就是指原图的装饰。
CSS样式如下：注意在div(本例中class命名为grd )的样式里position被设成relative(相对); 而在span里position被设成absolute(绝对)；这个非常重要！而其它样式比如：width(宽度)，top(上间距) 都可以根据实际情况来定。
复制内容到剪贴板
程序代码
程序代码<style type="text/css">
.grd {
border:1px solid #CECECE;
padding:50px;
height:50px;
width:147px;
position:relative;
}
.grd span{
background: url(/images/hot.gif) no-repeat;
display: block;
position: absolute;
width: 35px;
height: 58px;
top: 5px;
left:140px;
border: 0px;
}
</style>
.grd {
border:1px solid #CECECE;
padding:50px;
height:50px;
width:147px;
position:relative;
}
.grd span{
background: url(/images/hot.gif) no-repeat;
display: block;
position: absolute;
width: 35px;
height: 58px;
top: 5px;
left:140px;
border: 0px;
}
</style>
复制内容到剪贴板程序代码
程序代码<div class="grd">
<span></span>
<img src="/images/61dh.png" border="0"/>
</div>
<span></span>
<img src="/images/61dh.png" border="0"/>
</div>
演示：图片重叠
修修改改，我的代码就变成这样了：
HTML代码[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
文章来自: 
引用通告: 
Tags: 评论: 0 | 引用: 0 | 查看次数: 347
发表评论
![收集技术[SQL][ASP][JavaScript]](images/icons/21.gif){kind=icon}
