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

  发布时间:2013-08-01 14:41:12   作者:佚名   我要评论
input框中有图片的情况下如何使用css实现,为了美观、形象,一般都会在用户名,密码等输入框中加一个图片,其实很简单,具体的实现如下,感兴趣的朋友可以参考下

GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
如果你想靠AI翻身,你先需要一个靠谱的工具!

现在很多的页面为了美观、形象,一般都会在用户名,密码等输入框中加一个图片,以便更形象的说明这个输入框的用意。美工的一个小图片,却给前端带来了很多麻烦,如何定位小图片,并且兼容各大浏览器(包括ie6)成了一个令人头疼的问题。


比如上图,具体的实现办法如下


复制代码
代码如下:

<div class="item-ifo">
<input type="text" id="loginname" name="loginname" class="text" tabindex="1" autocomplete="off"/>
<div class="i-name ico"></div>
</div>



复制代码
代码如下:

.item-ifo {
position: relative;
width: 307px;
}
.item-ifo .ico {
width: 16px;
height: 16px;
position: absolute;
top: 8px;
right: 12px;
z-index: 5;
}
.item-ifo .pic{
background: url(i/one4.jpg) no-repeat #fff;
}

如上代码就可以实现

外层item-ifo的样式中设置 绝对/相对定位position:relation / absolute;

在ico中里边设置宽、高,是为了确保图片能够显示出来,设置绝对定位absolute,使用top、left进行定位。

在pic里将图片的路径写明就可以了。
蓄力AI

相关文章

  • CSS实现动态图片的九宫格布局的实例代码

    这篇文章主要介绍了CSS实现动态图片的九宫格布局的实例代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-03
  • css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局

    这篇文章主要为大家介绍了正方形图片使用CSS如何实现成圆形布局,不使用PS软件处理,直接使用DIV CSS布局如何实现图片圆形化,具体实现过程请看下文
    2014-10-10
  • DIV+CSS中让布局、背景图片、文字内容居中的方法

    这篇文章主要为大家介绍了在DIV+CSS布局的页面里,让布局、背景图片、文字内容居中的方法,从布局内容到页面里文章文字居中都是非常重要的,而css来设置居中也是非常简单的
    2014-10-09
  • css中文字加图片的布局实现

    在文章中难免会出现表情,在在这种情况下如何以比较合理的方式显示文字与表情呢?其实很简单,通过简单几行CSS样式便可实现,感兴趣的朋友可以了解下
    2013-09-06
  • 用CSS布局复杂的图片边框实例

      这只是一个布局实例,学习CSS有用处,因为这个用来修饰图片的边框做的不错,主要是想了解如何用CSS实现这种布局,在相对、绝对定位,或者是在多种浏览器不失真、不
    2009-11-04
  • css实现朋友圈照片排列布局的代码

    纯css实现朋友圈不同数量图片不同布局,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2020-06-10

最新评论