css 背景透明文字(内容)不透明三种实现方法

好久没写博客了。以前还想着最少一个月抽空写几篇。结果没做到O(∩_∩)O~~。好吧。现在努力，继续坚持。

看着以前写的东西，感觉自己在逐渐成长。

先上图:

本文主要记录如上图一样的。文字或内容不透明，但背景有一个“透明蒙版”的效果。

平时一般用的方法有三种：

① 先创建一个透明度跟“透明蒙版”一样的1X1大小的透明png图片。然后采用填充背景图的方法(repeat)，实现背景透明而不影响文字的透明性。

优点：感觉兼容性最好。

缺点：要多弄一张透明图片。

这个就不写样式了。比较简单。

②采用opacity透明度。当然，要使文字不透明opacity不能加在父容器里，可以多加一个子标签或使用伪类实现。具体的方法就是使用绝对定位把需要透明的子标签或伪类覆盖在容器上。再设置z-index:-1,父容易设置z-index:0;

值得注意的是，当透明度加在伪类的时候，ie8是不支持的。

优点：兼容性较好。

缺点：要多加伪类或标签，使用伪类 ie8不支持。使用标签则需要多加一个标签。

使用的opacoty代码为

css：

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