修改input样式(图片覆盖)
效果图
修改前
修改后
思路
- 使用一张图片,将input标签和img标签放在同一个容器
- 将input标签width和height 放大,之后用input完全覆盖图片
- 将input透明,则只显示下层图片
代码
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main-box">
<div class="plus-box">
<img class="plus" src="plus.jpg">
<input type="file">
</div>
</div>
</body>
</html>
CSS
css 注释为/**/, 但为了看着清楚此处改为 //
.plus-box {
display: inline-block; /*设为内联块,为了看的清楚,下面注释改为双斜杠*/
position: relative; // 设置relative定为是为了配合下面的 position:absolute来实现img和input重合
width: 100px; // 确定整个区域大小-
height: 100px;
border: 1px solid #000000;
border-radius: 10px; //把矩形框设置为角为弧状的框
overflow: hidden; // 将子元素超过自己的部分隐藏
}
img {
position: absolute;
left: 0; // 在父元素的最左边
width: 100px;
height: 100px;
}
input {
left: 0;
float: left;
position: absolute;
width: 110px;
height: 150px;
background: #ff0000;
opacity: 0; // 设置此元素透明度,其中0为完全透明,1为完全不透明
}