input输入框中有图片怎么使用css布局实现
发布时间:2013-08-01 14:41:12 作者:佚名 我要评论
input框中有图片的情况下如何使用css实现,为了美观、形象,一般都会在用户名,密码等输入框中加一个图片,其实很简单,具体的实现如下,感兴趣的朋友可以参考下
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
比如上图,具体的实现办法如下
复制代码
代码如下:<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里将图片的路径写明就可以了。
相关文章
- 这篇文章主要介绍了CSS实现动态图片的九宫格布局的实例代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-03
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
这篇文章主要为大家介绍了正方形图片使用CSS如何实现成圆形布局,不使用PS软件处理,直接使用DIV CSS布局如何实现图片圆形化,具体实现过程请看下文2014-10-10- 这篇文章主要为大家介绍了在DIV+CSS布局的页面里,让布局、背景图片、文字内容居中的方法,从布局内容到页面里文章文字居中都是非常重要的,而css来设置居中也是非常简单的2014-10-09
- 在文章中难免会出现表情,在在这种情况下如何以比较合理的方式显示文字与表情呢?其实很简单,通过简单几行CSS样式便可实现,感兴趣的朋友可以了解下2013-09-06
- 这只是一个布局实例,学习CSS有用处,因为这个用来修饰图片的边框做的不错,主要是想了解如何用CSS实现这种布局,在相对、绝对定位,或者是在多种浏览器不失真、不2009-11-04
- 纯css实现朋友圈不同数量图片不同布局,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2020-06-10
最新评论