css样式求助 如何能在一张图片上再盖一张png的图?
盖在所选图片之上 给人感觉是选中了一样 如何实现附加的这个层的样式? 求详细代码 谢谢 展开
<style type="text/css">
.mya{width:300px;height:200px;display:block;border:5px solid #999;position:relative;}
.mya .img1{position:absolute;left:0;top:0;z-index:1;}
.mya .img2{position:absolute;left:10px;top:10px;z-index:2;}
</style>
<a class="mya" href="#">
<img class="img1" src="themum.jpg" width="300" height="200">
<img class="img2" src="selected.png" width="100" height="100">
</a>
2024-07-20 广告
2014-03-06
<li><a><img /><span></span></a></li>
</ul>
a设置成:块级元素,相对定位并给宽高
span设置为:display:none;
然后a:hover span设置display:block;背景图为这张png,宽高等于这个png,绝对定位到a的右下角
ie6下a:hover span不会生效,你还需要点小技巧解决,自己百度:ie6 a:hover span
css实现的只是:鼠标在链接图片上时出来选中图片,但鼠标移开会消失
如果要点击后鼠标移开图片还在,要用js,动态的给当前点击的链接添加这个span即可。
我对css也不怎么熟 是要在img后面加个层 然后把这个层的样式定义了 隐藏起来 当点击图片的时候直接显示这个层就可以了吗 如果是这样的话 能把这个的样式都写下来吗
代码见附件。
大概这样,我没测试,办公室没装ie6,如果ie6下不生效,把background: none;那句里面定义个不存在的背景图地址试试
剩下的就是,先把<span></span>从<a></a>里面删除,然后用javascript监听每个<a>,当前<a>被点击时,把<span></span>添加到<a></a>里面,吃饭去了,js部分你自己想办法搞定,不难的..
求代码 思路我也知道 就是不会写
<!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>
#warp{ width:auto; height:auto;}
#warp .img01{ position:relative;}
#warp .img02{ position:absolute; top:260px; left:301px;}
</style>
</head>
<body>
<div id="warp">
<img class="img01" src="亿淘APP/img/product/product_01.jpg" width="394" height="301">
<img class="img02" src="亿淘APP/img/input_01.png" width="100" height="50">
</div>
</body>
</html>