如何制作带有图像的圆形标签(响应)

时间:2015-08-13 11:06:00

标签: html css css3

我正在尝试使用图像制作输入文件。我在封锁标签内部有一个div工作解决方案。文件上传和圆形预览来了。但这是通过背景解决的。看起来像响应,我很高兴。 但验证员告诉我,将div放在标签标签中是不合适的。 所以我试图放一个图像标签而不是div .. 它不能正常工作。 http://jsfiddle.net/dkweb/mtsy33k1/9/

<div class="photo_container">
<label for="file_photo_id">
<img class="preview" src="http://javascript.ru/img/ws_2.png">
<!--  <img class="preview" src="https://im0-tub-ru.yandex.net/i?id=3b1992e3e1e8d68d24c678ffc749d2f5&n=33&h=170">
       and this doesnt work  -->
</label>
            <input type="file" name="file_photo" id="file_photo_id" />
        </div>

- 取消注释sec img,你会看到。 这取决于图像的分辨率。我总是不能把它圈起来。 你会就这个问题提出建议吗? 它们的灰色区域必须保持不可用于点击 - 只是一个内部有图像的圆圈。 提前谢谢。

0 个答案:

没有答案