上传图片样式设置

布织锁云

已于 2023-03-26 19:38:03 修改

阅读量244

点赞数

文章标签： css css3 html

于 2023-03-26 19:35:02 首次发布

本文链接：https://blog.youkuaiyun.com/qq_52731478/article/details/129783136

版权

这段代码展示了如何使用HTML和CSS创建一个定制的、具有图形设计的文件上传组件。通过设置相对定位和层叠样式，实现了背景图像、按钮图标和输入元素的完美对齐，同时隐藏了实际的文件选择输入，提供更好的用户体验。

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

在这里插入图片描述
html

<div class="upFile">
	<div class="rBackImg"></div>
  	<div class="upFileLogo">
		<p>+</p>
        <input type="file" onchange="upFile(this)" multiple>
	</div>
</div>

css

.upFile{
	  width: 100px;
	  height: 100px;
	  position: relative;
	  background-color: #EDEDED;
}
.rBackImg,.upFileLogo,.upFileLogo input{
	  position: absolute;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 100%;
}
.rBackImg{
	  z-index: 1;
}
.upFileLogo{
	  z-index: 2;
	  line-height: 100px;
	  text-align: center;
	  font-size: 50px;
}
.upFileLogo input{
	  opacity: 0;
}