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

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

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

3

主题

0

帖子

32

积分

体验VIP

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

积分
32
        
发表于 19-4-7 13:16:29 | 显示全部楼层 |阅读模式
现在很多的页面为了美观、形象,一般都会在用户名,密码等输入框中加一个图片,以便更形象的说明这个输入框的用意。美工的一个小图片,却给前端带来了很多麻烦,如何定位小图片,并且兼容各大浏览器(包括ie6)成了一个令人头疼的问题。
- z5 f) R9 Y) X; c$ ?/ Uinput输入框中有图片怎么使用css布局实现
7 d% A1 L$ }* x+ j, u比如上图,具体的实现办法如下 8 R% d" a) i! ?% d" D, `

# t* ?3 `: k+ z3 w4 W代码如下:
' p! {" `2 t3 w# w2 @" v% |5 S
  1. <div class="item-ifo"> $ O; g( ~# ~* C
  2. <input type="text" id="loginname" name="loginname" class="text" tabindex="1" autocomplete="off"/>
    6 e5 {0 y% H: ]7 g6 ?$ `
  3. <div class="i-name ico"></div> - Z% ^+ P1 @. E4 n
  4. </div>
复制代码

8 C0 }( N' u; L$ F' n; H  d代码如下:5 l( Q+ [7 Z% v

  1. # Z4 m( d6 E* x: u8 K5 h  [
  2. .item-ifo { % n& ], @% \$ z! y
  3. position: relative; 9 ?: B* i+ ~6 a) P: x* B
  4. width: 307px; 4 h- X' s/ e6 i" G1 M! h
  5. }
    ' H7 W. c3 }' J
  6. .item-ifo .ico {
    " p  @: B1 Q  L8 C
  7. width: 16px; 2 ^3 ~( v$ D, P7 `1 m2 Z- `0 s
  8. height: 16px; 6 ?5 V4 T& R: z
  9. position: absolute;
    ; @4 u, F" a0 I/ P
  10. top: 8px; ( n2 ?, {0 r3 @  s9 }
  11. right: 12px;
    4 ]5 i9 Y8 `, [- ]* _
  12. z-index: 5;
    1 A! [8 Q% A7 k% r; a7 {
  13. } " p1 l. t! c5 B( V9 U0 X9 H
  14. .item-ifo .pic{
    ; [- ~7 D9 B  A) c( v3 Z! V& n
  15. background: url(i/one4.jpg) no-repeat #fff;
    # ^  |' _1 b8 Y
  16. }
复制代码

7 d. G+ I( P% K
  u* ]  _" z3 f* V2 F! r如上代码就可以实现 + g- y; u4 l0 Q+ F5 R; ?" `8 H

8 i1 ~! y6 K3 D* G! U6 a外层item-ifo的样式中设置 绝对/相对定位position:relation / absolute;
, W" p* d+ }. n1 _: L0 Q& [) `1 \
' d6 c& M0 l  u在ico中里边设置宽、高,是为了确保图片能够显示出来,设置绝对定位absolute,使用top、left进行定位。 8 }0 R; V* b9 c3 S+ T
, N0 F7 v8 V; ?' C
在pic里将图片的路径写明就可以了。

qiuqiufa.com

网站简介

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