Question

Upload Button ：给我建议使用html5和css和1.7在图像中添加上传按钮对于下面的java 1.6图像，我需要在该（+）图像的角落添加上传按钮..

  <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="../css/stylejava.css">
    </head>
    <body>
        <h1>Welcome to Java</h1>
        <div class="imagewrap">
            <button type="submit" class="button" value="Button">
                <img src="../images/symbol1.png" alt="Submit"
                    style="width: 50px; height: 50px">
            </button>
            <img src="../images/java166.jpg" alt="Mountain View"
                style="width: 200px; height: 200px">
        </div>
        <div class="imagewrap">
            <button type="submit" class="button1" value="Button 1">
                <img src="../images/symbol.png" alt="Submit"
                    style="width: 50px; height: 50px">
            </button>
            <img src="../images/java177.jpg" alt="Mountain Viewm"
                style="width: 200px; height: 200px">
        </div>

    </body>
    </html>

这是我的html5代码

Answer 1

您可以使用label标记来实现您想要的内容。

以下是一个示例：http://jsfiddle.net/tvtespeq/

<强> HTML：

<input type="file" id="img-upload">
<label id="img-label" for="img-upload"></label>

<强> CSS：

#img-label {
    width: 100px;
    height: 100px;    
    display: block;    
    background: url("http://placehold.it/100x100");

    cursor: pointer;    
}

#img-upload {
    display: none;
}

需要使用html 5在图像中添加上传按钮

1 个答案: