html怎样把一张图片弄到输入框里面??
发布网友
发布时间：2022-04-25 19:02
共6个回答
热心网友
时间：2022-04-19 06:24
可以使用before或者after伪元素来实现。
1、新建一个html文件并写一个input标签。
2、通过给input标签前面的span标签添加after伪元素，给该伪元素的背景设置为想要添加的图片。
3、给父元素添加相对定位，为了使伪元素能相对父级div定位。通过调整after伪元素的left和top值即可实现将一张图片弄到input框内。
这样就可以实现把一张图片弄到输入框里面
扩展资料：
伪元素
1、CSS2 - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容
2、CSS2 - :after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容。
3、:first-letter 伪元素
"first-letter" 伪元素用于向文本的首字母设置特殊样式：
4、:first-line 伪元素
"first-line" 伪元素用于向文本的首行设置特殊样式。
热心网友
时间：2022-04-19 07:42
方法为：可以使用before或者after伪元素来实现。
具体的操作步骤如下：
1、首先，创建一个新的html文件并编写一个input标签，如下图所示。
2、其次，将after伪元素添加到input标签前面的span标签，然后将伪元素的背景设置为要添加的图片，如下图所示。
3、最后，将相对位置添加到父元素，为了使伪元素能相对父级div定位。 通过调整after伪元素的left值和top值，可以将图片放入input框。这样，就实现了把一张图片弄到输入框里面了，如下图所示。
热心网友
时间：2022-04-19 09:17
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
#text1{ background:url(icon.jpg) no-repeat left center; width:200px; height:30px;}
</style>
</head>
<body>
<input type="text" id="text1" />
</body>
</html>
以上代码就能实现效果：不用定位啥的搞那么复杂
热心网友
时间：2022-04-19 11:08
你css属性写错了，查改下~
建议如果你是初学者，最好用dreamweaver这款编辑器，可以纠错代码和错误提醒！
来自：求助得到的回答
热心网友
时间：2022-04-19 13:16
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>在Input框中使用背景图片</title>
</head>
<body>
<INPUT class=txtfld1 style="BACKGROUND-IMAGE: url(/jscss/demoimg/wall_s2.jpg); BACKGROUND-REPEAT: no-repeat" size=10 name=name> <INPUT class=txtfld1 style="BACKGROUND-IMAGE: url(/jscss/demoimg/wall_s3.jpg); BACKGROUND-REPEAT: no-repeat" maxLength=11 size=12 name=mobile> <INPUT class=txtfld1 style="BACKGROUND-IMAGE: url(/jscss/demoimg/wall_s6.jpg); BACKGROUND-REPEAT: no-repeat" maxLength=20 size=15 name=phone> <INPUT class=txtfld1 style="BACKGROUND-IMAGE: url(/jscss/demoimg/wall_s4.jpg); BACKGROUND-REPEAT: no-repeat" maxLength=20 size=25 name=email>
</body>
</html>
热心网友
时间：2022-04-19 15:41
