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> 展开
<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个回答
展开全部
方法为：可以使用before或者after伪元素来实现。
具体的操作步骤如下：
1、首先，创建一个新的html文件并编写一个input标签，如下图所示。
2、其次，将after伪元素添加到input标签前面的span标签，然后将伪元素的背景设置为要添加的图片，如下图所示。
3、最后，将相对位置添加到父元素，为了使伪元素能相对父级div定位。 通过调整after伪元素的left值和top值，可以将图片放入input框。这样，就实现了把一张图片弄到输入框里面了，如下图所示。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
可以使用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" 伪元素用于向文本的首行设置特殊样式。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!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>
以上代码就能实现效果：不用定位啥的搞那么复杂
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
img{postion:absolute;left:100px;z-index:2;}/*postion改成position*/你css属性写错了，查改下~
建议如果你是初学者，最好用dreamweaver这款编辑器，可以纠错代码和错误提醒！
来自：求助得到的回答
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!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>
<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才会生效哦.
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
