input輸入框中有圖片怎么使用css布局實(shí)現(xiàn)
發(fā)布時(shí)間:2013-08-01 14:41:12 作者:佚名
我要評(píng)論

input框中有圖片的情況下如何使用css實(shí)現(xiàn),為了美觀、形象,一般都會(huì)在用戶名,密碼等輸入框中加一個(gè)圖片,其實(shí)很簡(jiǎn)單,具體的實(shí)現(xiàn)如下,感興趣的朋友可以參考下
現(xiàn)在很多的頁(yè)面為了美觀、形象,一般都會(huì)在用戶名,密碼等輸入框中加一個(gè)圖片,以便更形象的說(shuō)明這個(gè)輸入框的用意。美工的一個(gè)小圖片,卻給前端帶來(lái)了很多麻煩,如何定位小圖片,并且兼容各大瀏覽器(包括ie6)成了一個(gè)令人頭疼的問(wèn)題。

比如上圖,具體的實(shí)現(xiàn)辦法如下
<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;
}
如上代碼就可以實(shí)現(xiàn)
外層item-ifo的樣式中設(shè)置 絕對(duì)/相對(duì)定位position:relation / absolute;
在ico中里邊設(shè)置寬、高,是為了確保圖片能夠顯示出來(lái),設(shè)置絕對(duì)定位absolute,使用top、left進(jìn)行定位。
在pic里將圖片的路徑寫(xiě)明就可以了。

比如上圖,具體的實(shí)現(xiàn)辦法如下
復(fù)制代碼
代碼如下:<div class="item-ifo">
<input type="text" id="loginname" name="loginname" class="text" tabindex="1" autocomplete="off"/>
<div class="i-name ico"></div>
</div>
復(fù)制代碼
代碼如下:.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;
}
如上代碼就可以實(shí)現(xiàn)
外層item-ifo的樣式中設(shè)置 絕對(duì)/相對(duì)定位position:relation / absolute;
在ico中里邊設(shè)置寬、高,是為了確保圖片能夠顯示出來(lái),設(shè)置絕對(duì)定位absolute,使用top、left進(jìn)行定位。
在pic里將圖片的路徑寫(xiě)明就可以了。
相關(guān)文章
CSS實(shí)現(xiàn)動(dòng)態(tài)圖片的九宮格布局的實(shí)例代碼
這篇文章主要介紹了CSS實(shí)現(xiàn)動(dòng)態(tài)圖片的九宮格布局的實(shí)例代碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-03css3 圖片圓形顯示 如何CSS將正方形圖片顯示為圓形圖片布局
這篇文章主要為大家介紹了正方形圖片使用CSS如何實(shí)現(xiàn)成圓形布局,不使用PS軟件處理,直接使用DIV CSS布局如何實(shí)現(xiàn)圖片圓形化,具體實(shí)現(xiàn)過(guò)程請(qǐng)看下文2014-10-10DIV+CSS中讓布局、背景圖片、文字內(nèi)容居中的方法
這篇文章主要為大家介紹了在DIV+CSS布局的頁(yè)面里,讓布局、背景圖片、文字內(nèi)容居中的方法,從布局內(nèi)容到頁(yè)面里文章文字居中都是非常重要的,而css來(lái)設(shè)置居中也是非常簡(jiǎn)單的2014-10-09- 在文章中難免會(huì)出現(xiàn)表情,在在這種情況下如何以比較合理的方式顯示文字與表情呢?其實(shí)很簡(jiǎn)單,通過(guò)簡(jiǎn)單幾行CSS樣式便可實(shí)現(xiàn),感興趣的朋友可以了解下2013-09-06

純css實(shí)現(xiàn)朋友圈不同數(shù)量圖片不同布局,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2020-06-10