鍍金池/ 問答/人工智能  網(wǎng)絡(luò)安全  HTML/ less中如何使用函數(shù)兼容ie中的opacity

less中如何使用函數(shù)兼容ie中的opacity

在css中，我們經(jīng)常需要使用opacity來設(shè)置某個dom的透明度，但是這屬性在ie8中存在兼容性問題，我現(xiàn)在想寫一個函數(shù)，方便同時兼容

.opacity(@num-opt) {
  opacity: @num-opt;
  filter: alpha(opacity = percentage(@num-opt)); //filter 過濾器   兼容IE678
}

具體調(diào)用時

.head-warp {
  // height: 50px;
  height: 50px;
  position: fixed;
  top: 0;
  z-index: 2;
  width: 100%;
  // background-color: rgba(255, 255, 255, .9);
  background-color: rgb(255, 255, 255);
  // opacity: 0.9;
  // filter:alpha(opacity=90); 
  .opacity(0.9);
  .shadow(2,2,10,@color-holder);
  .head-logo {
    img {
      height: 40px;
    }
  }
}

但是less編譯的時候，一直報(bào)

clipboard.png

回答
編輯回答
舊酒館
.opacity(@number){
  /* older safari/Chrome browsers */
  -webkit-opacity: @number/100;
  /* Netscape and Older than Firefox 0.9 */
  -moz-opacity: @number/100;
  /* Safari 1.x (pre WebKit!) 老式khtml內(nèi)核的Safari瀏覽器*/
  -khtml-opacity: @number/100;
  /* IE9 + etc...modern browsers */
  opacity: @number/100;
  /* IE 4-9 */
  filter:alpha(opacity=@number);
  /*This works in IE 8 & 9 too*/
  -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=@number);
  /*IE4-IE9*/
  filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=@number);

}
2017年2月13日 13:52