在一张图片上添加删除的照片

cc20150126

于 2015-03-19 19:44:37 发布

阅读量6.3w

点赞数

CC 4.0 BY-SA版权

分类专栏： web 文章标签： css 图片删除

本文链接：https://blog.youkuaiyun.com/class_horse/article/details/44463267

web 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一种使用CSS和HTML实现的图片展示效果，包括图片的尺寸设定、边框样式及位置固定的删除按钮等元素的布局方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、css样式

.photoX{
    margin: 5px;
    width: 300px;
    height: 200px;
    border:1px solid #5df;
}
.rubbish{
    width:32px;
    height:32px;
    position:absolute;
    z-index: 10;
    left: 270px;
    top: 10px;
    cursor:pointer;
}

2、html

<div style="float:left; position: relative;">
    <img id="photoX3" 
         class="photoX" 
         src="/hospital1/tool/getImage.jsp?filePath=basePathzyj_196/f6c8b20a-2ba1-4ec6-a6b2-cbcc787fd95c.png" 
         style="border: 1px solid rgb(85, 221, 255);">
    <img id="rubbish_photoX3" 
         onclick="deletePhoto('basePathzyj_196/f6c8b20a-2ba1-4ec6-a6b2-cbcc787fd95c.png','photoX3')" 
         src="/hospital1/icons/rubbish.png" 
         class="rubbish" 
         title="删除">
</div>

效果图如下：