html怎样把一张图片弄到输入框里面？？

有一张图片我想把它弄到输入框的中间用什么办法才可以呢我为什么我下面的代码不行呢不管怎么改left值都不动啊为什么我加了z-index也不行呢我试了加float也不行呢为什... 有一张图片我想把它弄到输入框的中间用什么办法才可以呢我为什么我下面的代码不行呢不管怎么改left值都不动啊为什么我加了z-index也不行呢我试了加float也不行呢为什么呢怎样才可以呢用什么办法呢

<html>
<head>
<style type="text/css">
img{postion:absolute;left:100px;z-index:2;}
#txt1{position:absolute;z-index:1;}
</style>
</head>
<body>
<img src="xin.jpg">
<input type="text" id="txt1" style="width:200px;height:30px;">

</body>
</html> 展开

 我来答

6个回答

#热议# 为什么说不要把裤子提到肚脐眼？

59分粑粑分享生活

高粉答主

2019-12-24 · 专注生活好物分享，解答日常方方面面的问题

59分粑粑分享生活

采纳数：326 获赞数：119806

向TA提问私信TA

关注

展开全部

方法为：可以使用before或者after伪元素来实现。

具体的操作步骤如下：

1、首先，创建一个新的html文件并编写一个input标签，如下图所示。

2、其次，将after伪元素添加到input标签前面的span标签，然后将伪元素的背景设置为要添加的图片，如下图所示。

3、最后，将相对位置添加到父元素，为了使伪元素能相对父级div定位。通过调整after伪元素的left值和top值，可以将图片放入input框。这样，就实现了把一张图片弄到输入框里面了，如下图所示。

已赞过 已踩过<

评论收起

TableDI
2024-07-18 广告

当两个表格需要匹配出不同的数据时，通常的做法是使用某个共同的关键字段（如ID、姓名等）来对比。首先，确定两个表格中的关键字段是否一致，并确保它们的数据格式相同。然后，使用数据处理软件（如Excel、SQL等）对两个表格进行联接或查询操作。通... 点击进入详情页

本回答由TableDI提供

沙雕动态图
2019-08-28 · TA获得超过2189个赞

知道答主

回答量：53

采纳率：0%

帮助的人：1.3万

我也去答题访问个人页

关注

展开全部

可以使用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" 伪元素用于向文本的首行设置特殊样式。

本回答被网友采纳

已赞过 已踩过<

评论收起

百度网友61373891
推荐于2017-09-06 · TA获得超过5609个赞

知道大有可为答主

回答量：3703

采纳率：74%

帮助的人：565万

我也去答题访问个人页

关注

展开全部

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>

以上代码就能实现效果：不用定位啥的搞那么复杂

已赞过 已踩过<

评论收起

益享天开
2015-07-08 · 专注分享互联网办公、城市服务等常见问题

益享天开

采纳数：337 获赞数：1021

向TA提问私信TA

关注

展开全部

img{postion:absolute;left:100px;z-index:2;}/*postion改成position*/

你css属性写错了，查改下~

建议如果你是初学者，最好用dreamweaver这款编辑器，可以纠错代码和错误提醒！

来自：求助得到的回答

本回答被提问者采纳

已赞过 已踩过<

评论收起

张nbsp
2015-07-07 · 超过43用户采纳过TA的回答

知道小有建树答主

回答量：130

采纳率：0%

帮助的人：71.5万

我也去答题访问个人页

关注

展开全部

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>

更多追问追答

追问

这不是我想要的

追答


.w{
  width:160px;
  height:19px;
  border:1px solid #6699CC;
  background-image:url(pic/ad3.jpg);
}
.b{
 background-image:url(pic/2.jpg);
 width:100px;
 border:0px;
}

这是css代码,下面来看看html代码.

注意提示一点的就是在定义type=submit时必须设置border=0才会生效哦.

本回答被网友采纳

已赞过 已踩过<

评论收起

更多回答（4）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

html怎样把一张图片弄到输入框里面？？

其他类似问题

为你推荐：