css之背景透明的研究

1. 因項目的須要咱們要實現下面的效果
   

   
   

   
   

   這個是在一個input的後面有一個圖標，而後當鼠標通過input框時或小圖標時，input框的下劃線要高亮，圖片顏色要變藍而後點擊input框或者是後面的小圖標的時候要彈出日期控件框。

   
   

2. 實現的方法

     2.1個人第一種想到實現的方法，是將這個圖片做爲其背景圖片放在右邊，可是這個圖片不僅僅是一個圖片，而是四個圖片。圖以下：

   ，有四個圖片，每一個圖形爲20*20

   html代碼以下：

<input class="Wdate" id="d4311" type="text" onclick="WdatePicker({skin:'default',dateFmt:'yyyy/MM/dd',minDate:'{%y-1}-%M-%d',maxDate:'#F{$dp.$D(\'d4312\')||\'%y-%M-%d\'}'})">

     1>即便你使用背景定位，剛開始不讓第二個到第四個圖片顯示出來，只顯示第一個，css樣式以下：

.Wdate {
    border: #999 1px solid;
    height: 20px;
    background: #fff url(data_select.png) no-repeat right;
    background-position: 150px,0px;，相對於框的左邊150px,這樣恰好顯示20
}

    效果以下圖：，這個框的總長度爲170

    

看似實現了效果，可是當鼠標讓其input框高亮的時候，那你就必須顯示第二個圖片，運用背景定位，css樣式以下

.Wdate {
    border: #999 1px solid;
    height: 20px;
    background: #fff url(data_select.png) no-repeat right;
    background-position: 130px,0px;
}

可是這樣你的第一個圖片就沒辦法隱藏了，效果以下圖：

因此這種辦法行不一樣。

2.2.思考，上面的辦法之因此出問題是由於不能把第一個圖片給隱藏起來，因此辦法就出來了，就是單獨用一個標籤好比說<span>,讓其爲inline-block，而後讓其高度和寬度爲20*20，這樣就只能顯示一個圖片的內容，這樣怎麼運用背景定位也不會出錯，可是問題也出來了，怎麼讓其顯示在input框的右邊，顯示有一個方法是運用絕對定位的方法，

讓其相對於其父元素進行定位到input框裏面去。

html代碼以下：

<input id="terminalDeviceFromDate" class="timeInput timeInputable" type="text" onclick="WdatePicker({skin:'default',dateFmt:'yyyy/MM/dd',minDate:'{%y-1}-%M-%d',maxDate:'#F{$dp.$D(\'terminalDeviceToDate\')||\'%y-%M-%d\'}'})">

<span id="btnFromData" class="btnData"></span>

css樣式以下：

input的樣式

#terminalDeviceFromDate, #resourceFromDate, #deviceFromDate,#warningRepairFromDate {
    width: 85px;
}
input[type="text"] {
    font-size: 11px;
    color: #616060;
    border-bottom: 1px solid #949799;
    cursor: pointer;
    padding: 0 0 1px 1px;
}

日期圖標的<span>的樣式以下

.btnData {
    margin: 0 0 -5px -23px;
    top: 17px;
}
.btnData {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(./image/data_select.png?t=5.0.0.0_956201456) 0px 0px;
    cursor: pointer;
    position: absolute;
｝

       這樣的絕對定位，就能夠把日期圖標定位到input的右邊了，可是有個問題，當咱們點擊日期圖標的時候，並不會出來日期控件，由於咱們是當input收到雙擊事件的時候纔會出現日期空間，若是在圖標點擊事件中在點擊一個input的，觸發input的雙擊事件，可是這樣作有問題，日期控件是出來了可是選好的時間再也不input裏面，而是在圖標上，這樣就沒有達到咱們的效果。

        綜上所述，咱們要到達的效果是，點擊圖標的時候也出現日期控件，這樣咱們能夠利用z-index屬性，將日期圖標置於input的後面，這樣咱們點擊日期圖標就是點擊input控件，這樣時間就會顯示到input裏面，可是有個問題是，input把後面的日期圖標給遮住了，顯示不出來，以下圖因此：

        

因此咱們要讓input的背景透明，這樣就能夠顯示出來了，

給input框添加一個樣式，就好了，css樣式以下：

.timeInputable {
     background: transparent;//就是徹底透明
｝

效果徹底達到咱們的要求以下：

可是後來又發現還有一個設置透明度的opacity，能夠從徹底透明到徹底不透明0~1

可是若是這麼設置css樣式，按理是徹底透明的

.timeInputable {
     opacity: 0;//就是徹底透明
｝

可是效果卻不是咱們指望的，input框的下劃線沒了，效果以下：

若是設置半透明，這樣顏色就變淺了不是咱們所須要的，能夠看出opcity是將整個看成來設透明度，不單單是背景。

因此仍是用

.timeInputable {
     background: transparent;//就是徹底透明
｝

可是問題又來了，由於設置爲了透明色，因此背景顏色沒了，好比咱們用了最近一週，之類的時間，input就要disabled,不可用，默認顏色變灰。原本的效果是以下圖所示：

可是因爲這個樣式，顏色出不來了

.timeInputable {
     background: transparent;//就是徹底透明
｝

效果以下：

就是雖然input不可用了disabled，可是顏色沒有變爲灰色，這樣，用戶體驗很差。

可是這兒就能夠用上opcity這個屬性了，反正這兒變爲灰色

當用戶選擇自定義的時候，就用這個徹底透明的樣式：

.timeInputable {
     background: transparent;//就是徹底透明
｝

但用戶選擇最近一週，一年，或者一個月，用下面的樣式：

timeInputdisable {
    background: rgba(0,0,0,0.2);  黑色大半透明
}

這樣就達到咱們的效果了