腾讯云网站解决方案帮您轻松应对建站成本高/网络不稳等常见问题

[其他] input输入框中有图片怎么使用css布局实现

0
回复
1357
查看
[复制链接]

3

主题

0

帖子

32

积分

球球发

体验VIP

Rank: 28Rank: 28Rank: 28Rank: 28Rank: 28Rank: 28Rank: 28

积分
32
发表于 19-4-7 13:16:29 | 显示全部楼层 |阅读模式         
现在很多的页面为了美观、形象,一般都会在用户名,密码等输入框中加一个图片,以便更形象的说明这个输入框的用意。美工的一个小图片,却给前端带来了很多麻烦,如何定位小图片,并且兼容各大浏览器(包括ie6)成了一个令人头疼的问题。 8 h! L. {% T$ L6 N# |/ w
input输入框中有图片怎么使用css布局实现
% E9 A) Q4 w4 l- k比如上图,具体的实现办法如下 " N+ T' ^* C8 w8 H* [) R" ?
+ d! B6 L8 J0 l' r
代码如下:" s5 ^/ U! a0 E, I
  1. <div class="item-ifo"> ' |  V0 n* j; X- D" E  Y1 X9 d" U
  2. <input type="text" id="loginname" name="loginname" class="text" tabindex="1" autocomplete="off"/> 0 m) M  V& M- b3 |/ C/ \- o
  3. <div class="i-name ico"></div>
    5 y3 J- I9 y7 p* G6 a- @0 }
  4. </div>
复制代码
0 X; E7 _! Z6 g& m' a: \: X
代码如下:
7 L& i2 M& o" ?& I( \" z# z
  1. - I& K$ y- c2 M- N4 j' w
  2. .item-ifo { / b; b6 F2 V6 q$ A
  3. position: relative; 4 R9 \/ X  V6 b# V( s8 N; D
  4. width: 307px;
    & s: p+ G' G- I5 r
  5. }
    2 J8 N: L# i4 b1 A* I3 s3 V
  6. .item-ifo .ico { 2 O% [. l/ V! \" ]
  7. width: 16px;
    : w/ {7 `3 `; L  e4 y0 P5 D7 ?. @
  8. height: 16px; / b0 ]$ Q3 C6 I4 e$ }  s; g9 e
  9. position: absolute; 6 h9 B& H% Z0 t  Z
  10. top: 8px; ' O! i$ A; J2 ~* B  L- o
  11. right: 12px; 0 w; A  P/ t1 C" J% U- l
  12. z-index: 5; 3 r- s6 M4 w& \  I
  13. }
    * p+ m/ J+ g! T1 `* ^8 |) M- f
  14. .item-ifo .pic{
    6 X& b, `- e5 [7 r
  15. background: url(i/one4.jpg) no-repeat #fff;
    5 e1 O9 Y# b' e5 r
  16. }
复制代码

" u) v8 T- w# l% j$ d9 Y2 x8 N9 Z5 W- s1 }: K
如上代码就可以实现 8 {# |/ ?* o$ m$ A$ \, b
2 e9 H% K, k) Q6 |6 w1 U
外层item-ifo的样式中设置 绝对/相对定位position:relation / absolute;
. f) x. i( m+ g( W: v
) |2 t% s6 m) s+ w" X在ico中里边设置宽、高,是为了确保图片能够显示出来,设置绝对定位absolute,使用top、left进行定位。 & n* D" j/ b' A

" W" s/ B, y& h在pic里将图片的路径写明就可以了。
网站简介

球球发,是一家 Discuz! 商业插件、风格模板、网站源码、 Discuz!运营维护技术等于一体的交流分享网站,全站95%的资源都是免费下载,对于资源我们是每天更新,每个亲测资源最新最全---球球发(如果我们有侵犯了您权益的资源请联系我们删除