css旋转、透明度兼容IE（书写水印，并且兼容Ie9 操作）

        现在使用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 = $("" + timpDay + "   " + timpTime + "   " +data.index+"   " +dataName+ "");
		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

（2）html代码

内容内容内容

（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)