Question

HTML：

<div>
  <img src="some/path/" class="thumbnail" />
  <input type="file" class="image_upload" />
</div>

CSS：

div
{
  border: 2px solid #ccc;
  width: 50px;
  height: 50px;
  overflow: hidden;
}
.thumbnail
{
  width: 100%;
}
.image_upload
{
  opacity: 0;
  position: absolute;
}

我希望<img>和<input type="file">相互重叠，并填充其父<div>。如何修复我的CSS以实现这一目标？

Answer 1

文件输入字段实际上并不符合规则（或至少如您所期望的那样）。为了完成你所听到的事情，你必须要有创意。示例：http://jsfiddle.net/ZTPCd/

Answer 2

无法更改文件输入的大小。您可以redesign the file-input and，但可点击区域的大小不可修改。

编辑： Aaron显示了第一个技巧，我添加了第二个技巧，所以请参阅this fiddle，其中整个图像可以点击进行文件输入。

诀窍是将font-size设置为较大的值，然后将opacity设置为零，最后将overflow: hidden添加到父元素。

Answer 3

可能。

为输入类型文件添加此css

.My_CSS {
    opacity: 0; 
    border: none;
    border-radius: 3px;
    background: grey;
    position: absolute;
    left: 0px;    
    width: 100%;
    top: 0px;
    height: 100%;
}

Answer 4

您需要向父div添加相对定位，因此input字段不会相对于浏览器窗口定位。（谷歌有关绝对/相对定位的更多信息）。

您必须在input代码中添加一些特定的定位（上/下）。

http://jsfiddle.net/NbhQY/

（如果需要包含文件上传，您的外部div必须更大一些。）

Answer 5

在这里你需要使用一些JavaScript。由于我没有看到任何方法来更改CSS输入（type = file）本身，我将其隐藏，但<div>负责<input type='file'>。

＆＃13;

var box = document.getElementById("box");
var file = document.getElementById("file");

box.addEventListener('click', function(){
 file.click();
})

＆＃13;

#box {
    font-size: 30px;
    text-align: center;
    width: 300px;
    height: 200px;
    padding: 10px;
    border: 1px solid #999;
    position: relative;
}

p {
  position: absolute;
  top: 80px;
  color: white;
}

#file {
    width: 100%;
    height: 100%;
    visibility: hidden;
    z-index: 100;
}

＆＃13;

<div id="box">
    <img id="image" src="http://guide.denverpost.com/media/photos/full/mountain_600x600.jpg" width="100%" height="100%"/>
    <input type="file" id="file"/>
    <p>Click to import</p>
</div>

＆＃13;

make <input type =“file”/>元素填充其父<div> </div>

5 个答案: