上传图片本地html+css

最新推荐文章于 2024-08-29 21:19:22 发布

mrhaoxiaojun

最新推荐文章于 2024-08-29 21:19:22 发布

阅读量2.8k

点赞数

分类专栏： html/css 文章标签： html css 上传图片

本文链接：https://blog.csdn.net/mrhaoxiaojun/article/details/53350208

版权

html/css 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

html

<div class="task-upimg">
    <a class="text">+添加图片</a>
    <img class="upimg" src="http://css88.b0.upaiyun.com/css88/2016/10/es6-core-features-overview-large.png" >
    <input type="file" class="task-up-input" id="task-up-input" name="task-up-input" value="">
</div>

css

.task-upimg {
    width: 172px;
    height: 135px;
    line-height: 135px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    text-align: center;
    position: relative;
    float: left;
    .text {
        cursor: pointer;
        text-decoration: underline;
        color: #009DF8;
        font-size: 18px;
    }
    .upimg {
        cursor: pointer;
        width: 100%;
        height: 100%;
        display: none;
        position: absolute;
        top: 0;
        left: 0;
    }
    .task-up-input {
        position: absolute;
        left: 0;
        width: 100%;
        top: 0;
        height: 100%;
        opacity: 0;
        filter: alpha(opacity=0);
        font-size: 500px;
        cursor: pointer;
        overflow: hidden;
    }
}