实现点击元素上传文件

最新推荐文章于 2024-09-09 14:55:23 发布

一又十七

最新推荐文章于 2024-09-09 14:55:23 发布

阅读量1.3k

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_45387568/article/details/102823410

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果图：
点击虚线框内任意位置可以上传文件。
在这里插入图片描述

实现过程：
div和input大小设置一样，并且使其重叠（input的type为file），建立层叠上下文，input在最上面设置 opacity: 0;

以下代码直接粘贴有问题，因为我是从项目中拉下来的，位置可能有误。

html:

 <div class="oimg">
      <input type="file" class="file" />
      <img src="../images/add.png" alt />
    </div>

css:

.oimg {
    width: 120px;
    border-radius: 4px;
    height: 120px;
    border: 1px dashed black;
    display: inline-block;
    position: relative;
    left: -190px;
    top: 30px;
  }
  input.file {
    width: 120px;
    height: 120px;
    border: 1px dashed black;
    margin-top: 0px;
    opacity: 0;
    position: relative;
    z-index: 99;
  }
  img {
    position: relative;
    top: -80px;
  }