好久没写博客了。以前还想着最少一个月抽空写几篇。结果没做到O(∩_∩)O~~。好吧。现在努力，继续坚持。
看着以前写的东西，感觉自己在逐渐成长。
先上图:
本文主要记录如上图一样的。文字或内容不透明，但背景有一个“透明蒙版”的效果。
平时一般用的方法有三种：
① 先创建一个透明度跟“透明蒙版”一样的1X1大小的透明png图片。然后采用填充背景图的方法(repeat)，实现背景透明而不影响文字的透明性。
优点：感觉兼容性最好。
缺点：穴ky"/qq/" target="_blank" class="keylink">qq24MWq0rvVxc24w/fNvMasoaM8L3A+CjxwPtXiuPa+zbK70LTR+cq9wcuho7HIvc+88rWloaM8L3A+CjxwPqLassnTw29wYWNpdHnNuMP3tsiho7WxyLujrNKqyrnOxNfWsrvNuMP3b3BhY2l0ebK7xNy809TauLjI3cb3wO+jrL/J0tS24LzT0ru49tfTserHqbvyyrnTw86xwODKtc/WoaO+38zltcS3vbeovs3Kx8q508O++LbUtqjOu7DR0OjSqs24w/e1xNfTserHqbvyzrHA4LiyuMfU2sjdxvfJz6Gj1NnJ6NbDei1pbmRleDotMSy4uMjd0tfJ6NbDei1pbmRleDowOzwvcD4KPHA+1rW1w9ei0uK1xMrHo6y1sc24w/e2yLzT1NrOscDgtcTKsbryo6xpZTjKx7K71qez1rXEoaM8L3A+CjxwPjxzdHJvbmc+08W146O6PC9zdHJvbmc+vObI3dDUvc+6w6GjPC9wPgo8cD48c3Ryb25nPsixteOjujwvc3Ryb25nPtKqtuC8086xwOC78rHqx6mjrMq508POscDgIGllOLK71qez1qGjyrnTw7Hqx6nU8tDo0qq24LzT0ru49rHqx6mhozwvcD4KPHA+yrnTw7XEb3BhY290ebT6wuvOqjwvcD4KPHA+Y3Nzo7o8L3A+Cgo8cHJlIGNsYXNzPQ=="brush:java;">filter:alpha(opacity=50); opacity:0.5;-moz-opacity:0.5;
sass：调用 ：@include opacity(50);
@mixin opacity($pre:0){
filter:alpha(opacity=$pre); opacity:$pre/100;-moz-opacity:$pre/100;
}
③使用滤镜跟rgba透明颜色实现。(目前使用)
优点：不会有多余的标签。兼容性也可以。
缺点：ie9同时兼容了滤镜和rgba所以在ie9上透明度颜色会重叠(颜色显得更深)，滤镜采用的十六进制颜色代码要计算。
css：
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#00FFFFFF', endColorstr='#00FFFFFF');background-color:rgba(255,255,255,0);
sass：调用：@include bgcolor(#000000,0.5);
@mixin bgcolor($color,$opacity){
$num:floor($opacity*255);
$sixteen:tenToSixteen($num);
$colorStr:'#'+$sixteen+str-slice('#{$color}',2);
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#{$colorStr}', endColorstr='#{$colorStr}');background-color:rgba($color,$opacity);
}
@function tenToSixteen($num){
$sixteen:"00","01","02","03","04","05","06","07","08","09","0A","0B","0C","0D","0E","0F","10","11","12","13","14","15","16","17","18","19","1A","1B","1C","1D","1E","1F","20","21","22","23","24","25","26","27","28","29","2A","2B","2C","2D","2E","2F","30","31","32","33","34","35","36","37","38","39","3A","3B","3C","3D","3E","3F","40","41","42","43","44","45","46","47","48","49","4A","4B","4C","4D","4E","4F","50","51","52","53","54","55","56","57","58","59","5A","5B","5C","5D","5E","5F","60","61","62","63","64","65","66","67","68","69","6A","6B","6C","6D","6E","6F","70","71","72","73","74","75","76","77","78","79","7A","7B","7C","7D","7E","7F","80","81","82","83","84","85","86","87","88","89","8A","8B","8C","8D","8E","8F","90","91","92","93","94","95","96","97","98","99","9A","9B","9C","9D","9E","9F","A0","A1","A2","A3","A4","A5","A6","A7","A8","A9","AA","AB","AC","AD","AE","AF","B0","B1","B2","B3","B4","B5","B6","B7","B8","B9","BA","BB","BC","BD","BE","BF","C0","C1","C2","C3","C4","C5","C6","C7","C8","C9","CA","CB","CC","CD","CE","CF","D0","D1","D2","D3","D4","D5","D6","D7","D8","D9","DA","DB","DC","DD","DE","DF","E0","E1","E2","E3","E4","E5","E6","E7","E8","E9","EA","EB","EC","ED","EE","EF","F0","F1","F2","F3","F4","F5","F6","F7","F8","F9","FA","FB","FC","FD","FE","FF";
@return nth($sixteen,$num+1)
}
平时用sass封装方法不多，所以遇到了一些坑：
1、sass的raga函数颜色值不能接受一个string类型的值，而滤镜需要计算十六进制的值然后进行组合字符串。所以当时考虑颜色参数是带#还是不带#遇到了问题。带#号rgba函数不会报错(如果参数使用带引号的会报错)。但滤镜哪里的颜色值就不好搞了。后来又看了下文档。才终于找到str-slice()函数把颜色值的#排除掉了。
2、滤镜中的颜色是#AARRGGBB形式的。其中RRGGBB代表的就是十六进制的颜色值。即平时使用的FFFFFF之类的值。主要是其中的AA这个对应的是rgba中的a是转换成十六进制后的颜色，如果不明白，不用急，只需两步就可以算出来。继续看：
①算出透明度相对于十进制的位置(0-255) ：floor($opacity*255); 例如：透明度是 0.5 那么相对于十进制的位置就是127。
②找出对应的十六进制字符。因为没有找到相应的转换函数。所以只能自己写一个咯。就是上面的@function tenToSixteen($num)。如上面的127。就是这里函数里对应的第128个(从1开始)。函数列举了0-255的十进制对应的十六进制(比较傻的做法)。还可以用算法算出对应的十六进制的。考虑到256个也不是很多，也懒得算了。直接就全部列举出来就好了。
感觉还有很多不足的地方。请高手不吝赐教。
THE END
