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

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

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

3

主题

0

帖子

32

积分

球球发

体验VIP

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

积分
32
发表于 19-4-7 13:16:29 | 显示全部楼层 |阅读模式         
现在很多的页面为了美观、形象,一般都会在用户名,密码等输入框中加一个图片,以便更形象的说明这个输入框的用意。美工的一个小图片,却给前端带来了很多麻烦,如何定位小图片,并且兼容各大浏览器(包括ie6)成了一个令人头疼的问题。 2 B6 p- q% v6 }0 h/ e  f- N
input输入框中有图片怎么使用css布局实现
! d! p, K6 z* v1 M" V2 h4 D比如上图,具体的实现办法如下
( o# i( q8 J& j+ h8 X
  z9 W. D1 [# ^/ V$ B3 h- ?- l& X代码如下:
6 |9 J2 I1 T1 ^( c4 g1 \" j
  1. <div class="item-ifo"> + Y) K: A# e( ?1 d
  2. <input type="text" id="loginname" name="loginname" class="text" tabindex="1" autocomplete="off"/> 6 ]$ D9 f9 o: K- M
  3. <div class="i-name ico"></div> 8 o0 e; A5 \2 m1 u
  4. </div>
复制代码
/ r  X" N7 k0 k3 p
代码如下:
# A) X; W! b3 c

  1. 9 Y3 r3 M: v" C
  2. .item-ifo {
    , M$ z5 w2 H, S' b) H
  3. position: relative; ! j6 X+ V6 ^" `: O; K' F/ y( \& _
  4. width: 307px;
    - l6 K8 I8 g; |: k' I
  5. } 4 O5 [- o: q* `* f2 Z
  6. .item-ifo .ico {
    ( T( T  O" a9 W6 \' U' I3 ~7 ?
  7. width: 16px;
    / Y. n( p, f: p0 i* v) ~* x& L8 e1 Q
  8. height: 16px;
    5 q2 O/ `7 y. T0 N' V; L
  9. position: absolute;
    ) a  X1 I" E4 [  C- O
  10. top: 8px; 0 E6 P* [" N9 g; ~$ e* H* W
  11. right: 12px;
    9 W: T3 y9 }+ [0 l
  12. z-index: 5; & x9 W; H& c+ a3 a4 Y; Z
  13. } ) w, m. v( g# p8 f, y% [
  14. .item-ifo .pic{ " L; i4 y  ]3 B4 O
  15. background: url(i/one4.jpg) no-repeat #fff; ( s: L1 u$ K! ^9 x9 f% e
  16. }
复制代码
0 j  L( i) ]& @$ D. G# R/ A

8 P# z) Q3 _' W' ^如上代码就可以实现
$ [# F' a+ E7 Q% K1 Q* A  x* w6 ], I# U. j5 B! T  w0 ]7 `
外层item-ifo的样式中设置 绝对/相对定位position:relation / absolute; ( X/ F8 O/ R4 r
8 g* G1 _8 {5 \
在ico中里边设置宽、高,是为了确保图片能够显示出来,设置绝对定位absolute,使用top、left进行定位。
9 p, p& c7 z6 W( ^& S' M  T  S+ ?$ P
; f( H! H& N' V1 Y, q# \& \在pic里将图片的路径写明就可以了。
网站简介

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