设置input = file时怎么改背景图片
1、因为是input标签
我们先要创建一个网页
我手头有visual studio 2015 就使用它
2、在打开的vs2015中选择文件->新建->文件
3、在打开的 新建文件 窗口中选择html页
4、在新建的html页中,我们创建一个我们要用的file标签
<input type="file" />
5、我们先运行起来看一下,默认的样式是怎么样的
效果见下图,可以看到是没有说明样式的,自然也没有背景
6、我们接下来通过修改样式,添加一个背景图片.来看一下效果
我们随便找一张背景图片
就以下边的图片为例说明
7、修改input标签的样式,为了好说明,我直接在标签上写style
<input type="file" style="background-image:url('z:\\pic1.jpg');"/>
我们运行起来看效果.
发现确实是变了
8、但我们实际在使用中,并不会直接这么用,或者是说我们并不会直接让他来显示 input=file的标签
因为它并不美观.
其实我们可以看到百度经验编辑器,点击添加图片的 button也不是input='file'的便签
9、通过看源码我们可以知道,百度经验是通过,在input='file'的标签,通过css样式覆盖了一个label的标签.我们实际看到的这个按钮,其实是一个label标签,通过单击label标签来触发input='file'.从而实现的上传功能.
通过添加一个label来看似改变了input='file'的背景图片
这确实是我们平常开发中常用到的做法
知道原理之后,实现起来就很简单了.
10、我这里通过写一个a标签来实现改 input='file'标签的背景图片
效果如下图
11、这里是实现的代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.filea {
position: relative;
display: inline-block;
background-image:url('z:\\pic1.jpg');
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
.filea input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
</style>
</head>
<body>
<input type="file" style="background-image:url('z:\\pic1.jpg');" />
<br />
<br />
<a href="javascript:;">
选择文件
<input type="file" name="" id="">
</a>
</body>
</html>
