input輸入框中有圖片怎么使用css布局實現(xiàn)
發(fā)布時間：2013-08-01 14:41:12 作者：佚名 
我要評論
我要評論input框中有圖片的情況下如何使用css實現(xiàn)，為了美觀、形象，一般都會在用戶名，密碼等輸入框中加一個圖片，其實很簡單，具體的實現(xiàn)如下，感興趣的朋友可以參考下
現(xiàn)在很多的頁面為了美觀、形象，一般都會在用戶名，密碼等輸入框中加一個圖片，以便更形象的說明這個輸入框的用意。美工的一個小圖片，卻給前端帶來了很多麻煩，如何定位小圖片，并且兼容各大瀏覽器（包括ie6）成了一個令人頭疼的問題。
比如上圖，具體的實現(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;
}
如上代碼就可以實現(xiàn)
外層item-ifo的樣式中設(shè)置 絕對/相對定位position：relation / absolute;
在ico中里邊設(shè)置寬、高，是為了確保圖片能夠顯示出來,設(shè)置絕對定位absolute，使用top、left進行定位。
在pic里將圖片的路徑寫明就可以了。
比如上圖，具體的實現(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;
}
如上代碼就可以實現(xiàn)
外層item-ifo的樣式中設(shè)置 絕對/相對定位position：relation / absolute;
在ico中里邊設(shè)置寬、高，是為了確保圖片能夠顯示出來,設(shè)置絕對定位absolute，使用top、left進行定位。
在pic里將圖片的路徑寫明就可以了。
相關(guān)文章
CSS實現(xiàn)動態(tài)圖片的九宮格布局的實例代碼
這篇文章主要介紹了CSS實現(xiàn)動態(tài)圖片的九宮格布局的實例代碼，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-03css3 圖片圓形顯示 如何CSS將正方形圖片顯示為圓形圖片布局
這篇文章主要為大家介紹了正方形圖片使用CSS如何實現(xiàn)成圓形布局，不使用PS軟件處理，直接使用DIV CSS布局如何實現(xiàn)圖片圓形化，具體實現(xiàn)過程請看下文2014-10-10DIV+CSS中讓布局、背景圖片、文字內(nèi)容居中的方法
這篇文章主要為大家介紹了在DIV+CSS布局的頁面里，讓布局、背景圖片、文字內(nèi)容居中的方法，從布局內(nèi)容到頁面里文章文字居中都是非常重要的，而css來設(shè)置居中也是非常簡單的2014-10-09- 在文章中難免會出現(xiàn)表情，在在這種情況下如何以比較合理的方式顯示文字與表情呢？其實很簡單，通過簡單幾行CSS樣式便可實現(xiàn)，感興趣的朋友可以了解下2013-09-06
純css實現(xiàn)朋友圈不同數(shù)量圖片不同布局，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧
2020-06-10