html5切图将input标签放到img图片上
时间: 2023-09-17 12:12:49 浏览: 264
html5 图片裁剪
你可以使用CSS的position属性来实现将一个input标签放到一个img图片上。具体做法如下:
1. 给img图片设置position: relative;属性,这样可以将其作为定位的父元素。
2. 给input标签设置position: absolute;属性,这样可以将其绝对定位在img图片上。
3. 使用top和left属性来调整input标签的位置,让其覆盖在img图片上。
以下是一个示例代码:
```html
<div style="position: relative;">
<img src="image.jpg" style="width: 200px; height: 200px; position: relative;">
<input type="text" style="position: absolute; top: 50px; left: 50px;">
</div>
```
这段代码将一个200x200像素的img图片放在一个relative定位的div容器中。然后,使用position: absolute;属性将一个input标签绝对定位在img图片上,并使用top和left属性将其定位在图片的左上角。
阅读全文