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);  黑色大半透明
}

这样就达到咱们的效果了