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

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

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

3

主题

0

帖子

32

积分

球球发

体验VIP

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

积分
32
发表于 19-4-7 13:16:29 | 显示全部楼层 |阅读模式         
现在很多的页面为了美观、形象,一般都会在用户名,密码等输入框中加一个图片,以便更形象的说明这个输入框的用意。美工的一个小图片,却给前端带来了很多麻烦,如何定位小图片,并且兼容各大浏览器(包括ie6)成了一个令人头疼的问题。 ) j/ o" m+ N- L' U3 r
input输入框中有图片怎么使用css布局实现
5 A% n% h& C+ U- E比如上图,具体的实现办法如下
9 e/ K, n% ^6 B0 d) J* ^  _, y& s
代码如下:
4 L: e3 T. {- c" ]& o  I0 y4 n
  1. <div class="item-ifo">
    # A' v" p5 y/ Z; B! u
  2. <input type="text" id="loginname" name="loginname" class="text" tabindex="1" autocomplete="off"/> 2 Y3 L, [. A9 V, M' F0 i4 S) h
  3. <div class="i-name ico"></div>
    7 y. |( ]6 @- W# v4 g
  4. </div>
复制代码

1 e% f7 s! e- |代码如下:" Y7 `& M2 i% k: F# L+ O5 b* U

  1. 2 I5 v/ [+ ]; y" i+ [
  2. .item-ifo {
    . {  _" P) U( F8 G4 D6 u
  3. position: relative;
    ( u5 _- k8 m7 z0 B. ^
  4. width: 307px;
    - G# L$ Z2 h. f7 s; c5 E+ v4 ^
  5. } : K1 k1 o4 a0 D4 a' C9 i
  6. .item-ifo .ico { + f, p& p$ G  H3 n! m3 N4 X: f
  7. width: 16px; ( U2 V& C3 y: k7 N. P
  8. height: 16px;
    - o8 J) j+ d) R$ [1 \7 G6 g
  9. position: absolute; - M0 J* u* S/ ?6 S! p
  10. top: 8px;
    $ K2 I' I# \3 V$ U
  11. right: 12px; 4 t2 C! X! F3 y) f9 V
  12. z-index: 5; ; w4 o: i5 b$ c9 \$ C
  13. }
    : x' c* Q2 a) x# h0 ^( Z, Y
  14. .item-ifo .pic{
    8 `$ X% ~5 H% r, X
  15. background: url(i/one4.jpg) no-repeat #fff;
    $ c" V% X& V& H" Q" A
  16. }
复制代码

# [; n0 o+ n% U; h, K
3 {- V! p2 @/ ~7 P" u( ~) ?% C如上代码就可以实现
) |0 N1 N, Q, A6 m
/ ^( v+ G- v. w5 Z( c外层item-ifo的样式中设置 绝对/相对定位position:relation / absolute;
4 B& c0 s0 s9 v6 b/ k' X$ V1 P1 J8 |' F) `$ m5 [
在ico中里边设置宽、高,是为了确保图片能够显示出来,设置绝对定位absolute,使用top、left进行定位。 4 S8 \) U& \' h1 F

1 w4 e# `. M% j. ^/ B1 N! b# V在pic里将图片的路径写明就可以了。
网站简介

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