css样式求助 如何能在一张图片上再盖一张png的图?

如图所示,现在是当点击某一张图的时候我加了一个边框选中但是我想要的效果是当点击之后让这样一个图片盖在所选图片之上给人感觉是选中了一样如何实现附加的这个层的样式?求详细代码... 如图所示,现在是当点击某一张图的时候 我加了一个边框选中 但是我想要的效果是当点击之后 让这样一个图片
盖在所选图片之上 给人感觉是选中了一样 如何实现附加的这个层的样式? 求详细代码 谢谢
展开
 我来答
吃心不改Pro
2014-03-06 · 狂吃不胖的瘦猴~
吃心不改Pro
采纳数:1482 获赞数:10786

向TA提问 私信TA
展开全部

<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>
博思aippt
2024-07-20 广告
作为深圳市博思云创科技有限公司的工作人员,对于Word文档生成PPT的操作,我们有以下建议:1. 使用另存为功能:在Word中编辑完文档后,点击文件->另存为,选择PowerPoint演示文稿(*.pptx)格式,即可将文档内容转换为PPT... 点击进入详情页
本回答由博思aippt提供
匿名用户
2014-03-06
展开全部
<ul>
<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部分你自己想办法搞定,不难的..

本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
house贼武士
2014-03-06
知道答主
回答量:2
采纳率:0%
帮助的人:2755
展开全部
可以用绝对定位定在图片上
追问
求代码   思路我也知道  就是不会写
追答

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

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式