css旋轉、透明度相容IE（書寫水印，並且相容Ie9 操作）
阿新 • • 發佈：2019-02-08
現在使用css3會比較方便實現一些功能，比如實現旋轉、透明，但是這些個東西相容IE是一件比較麻煩的事情。這次我通過filter實現了資料的旋轉和半透明。順便封裝了一個相容ie的水印，使用起來也會比較方便。下面是相應的程式碼和使用方法（有疑問歡迎隨時提問）：
（1）JS程式碼
define( ,function(){ /* * resultDiv 最外面的容器 * waterBox 用於放水印的標籤 * data 需要顯示的資料 */ var bindWater = function(resultDiv,waterBox,data){ var timpDay=new Date(); var timpTime = new Date(); var spaceHeight = 100;//間隔高度 var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字串 var startY = $(resultDiv).offset().top-100 ; //結果區域開始y,預設IE var bodyHeight = $(resultDiv).height() ; var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字串 var isOpera = userAgent.indexOf("Opera") > -1; //判斷是否Opera瀏覽器 var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判斷是否IE瀏覽器 var isEdge = userAgent.indexOf("Windows NT 6.1; Trident/7.0;") > -1 && !isIE; //判斷是否IE的Edge瀏覽器 if(!isIE && !isEdge){ startY = startY + 200; bodyHeight = bodyHeight ; }else { startY = startY + 100; bodyHeight = bodyHeight ; } var backNum = Math.ceil(bodyHeight/spaceHeight); //向上取數，如4.3區5 var surNum = (bodyHeight/spaceHeight)-Math.floor(bodyHeight/spaceHeight); //剩餘的小數4.3剩餘0.3 var dataName= plusXing(data.name,1,1); for(var m = 0;m < backNum;m ++){ var backDiv = $("<span class=\"backgroundMap\">" + timpDay + " " + timpTime + " " +data.index+" " +dataName+ "</span>"); var startTop = startY + spaceHeight * m; backDiv.css("top",startTop+"px"); $(waterBox).append(backDiv);} }; function plusXing(str,frontLen,endLen) { var len = str.length-frontLen-endLen; var xing = ''; for (var i=0;i<len;i++) { // 前端模糊化處理name xing+='*'; } return str.substring(0,frontLen)+xing+str.substring(str.length-endLen); } return bindWater; });
（2）html程式碼
<body id="aaa"> <div>內容內容內容</div> <div class="boxBack"></div> </body>
（3）CSS程式碼
/*水印樣式,如若使用需要將標籤改為這樣的類名*/ .boxBack{ position:static; opacity:0.2; filter: alpha(opacity=50); } .backgroundMap{ /* font-family:SimSun\9; */ position: absolute; z-index:99; width:65%; font-size:34px; left:245px; transform:rotate(-11deg); /* -15deg */ /*filter:"progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',FilteyType=bilnear,Dx=0,Dy=0,M11=0.9,M12=0.3,M21=-0.3,M22=0.9) alpha(opacity=10) ";*/ /*-ms-filter 是為了相容IE的*/ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',M11=0.9816271834476639, M12=0.19080899537654505, M21=-0.19080899537654505, M22=0.9816271834476639,) Alpha(opacity=10) inherit"; top:100px\9; }
（4）使用
var data= {
name:"nameZZZ",
index:"111"
};
new WaterMark("#aaa",".boxBack",User)